Werkbanken, gereedschapswagens en complete werkplaatsinrichting voor vakmensen en serieuze klussers. Online en in de showroom van 4.000 m² in Someren.
Kraftmeister Standard werkbank met 2 wandkasten multiplex 136 cm grijs
Productkaart Het belangrijkste component van de winkel.
De bever aan de werkbank en het woordmerk GEORGE AT WORK vormen samen het logo. Het staat altijd op een lichte achtergrond, links in de header.
Het rood van de mascotte is het logorood. In de winkel kleurt het elke korting, de onderstreping in de navigatie en het actieve hartje. De andere kleuren bestaan alleen in het logo: mascottegeel is geen interfacekleur.
Rood draagt het merk en trekt aandacht. Groen betekent actie en bevestiging. Staal kleurt de koppen, de navigatiebalk en de footer, de rest is wit en warm lichtgrijs.
Klik op een hexwaarde om hem te kopiëren.
Beeld 13%
Staal 10%
Hoofdknop, zoekknop en links. Kortingslabels zijn logorood. Spaarzaam, zodat het blijft opvallen.
In winkelwagen, naar afrekenen, op voorraad en de vinkjes van de USP’s.
Warm bijna-zwart voor tekst en de basisknop, nooit puur zwart. Staal voor koppen, titels, de navigatiebalk, de footer en het label “Nieuw”.
| Kleur | Token | Hex | RGB | Gebruik | Op de pagina |
|---|---|---|---|---|---|
| Merk en aandacht | |||||
| Merkrood | primary | 128 0 1 | Hoofdknop, zoekknop (sale), tellers, tekstselectie | 0,1% | |
| Merkrood ingedrukt | primary-strong | 94 0 0 | Hover en ingedrukt | hover | |
| Logorood | accent | 226 6 19 | Elk kortingslabel (sale), onderstreping in de navigatie bij hover en een open menu (de huidige categorie onderstreept wit), actief hartje, het icoon van een melding Fout. Het rood van het logo | <0,1% | |
| Leesrood | link | 166 20 26 | Links, actieve staat, nadruk in tekst | <0,1% | |
| Roodtint | primary-tint | 247 236 234 | Actieve zoeksuggestie, huidige pagina, vlak van een melding Fout | <0,1% | |
| Actie en status | |||||
| Actiegroen | positive | 18 89 38 | In winkelwagen, naar afrekenen, op voorraad | 0,3% | |
| Actiegroen ingedrukt | positive-strong | 14 64 28 | Hover en ingedrukt | hover | |
| Groentint | positive-tint | 234 241 236 | Vlak voor succes en voorraad | 0,2% | |
| Oker | warning | 148 98 0 | Icoon van een melding Let op en het productlabel “Bestseller”. 5,2:1 op wit | <0,1% | |
| Geeltint | warning-tint | 255 246 214 | Vlak van een melding Let op: het sterrengeel op 17% | melding | |
| Sterrengeel | rating | 255 203 0 | De sterren van Trusted Shops en van de productreviews. Nooit tekst of een knop: 1,5:1 op wit | <0,1% | |
| Tekst en structuur | |||||
| Inkt | ink | 46 43 38 | Tekst, producttitels, basisknop, focusring | 0,9% | |
| Inkt ingedrukt | ink-strong | 31 29 26 | Hover en ingedrukt | hover | |
| Staal | title | 41 49 51 | Koppen en titels, navigatiebalk en footer (bar), het label “Nieuw” (dark). Het staal van de navigatiebalk van versie 2 | 9,6% | |
| Taupe | neutral | 74 71 67 | Neutrale knop, het productlabel “Outlet” | 0,5% | |
| Taupe ingedrukt | neutral-strong | 59 56 53 | Hover en ingedrukt | hover | |
| Gedempt | muted | 97 93 85 | Secundaire tekst, oude prijs | 0,2% | |
| Secundair | faint | 118 113 105 | Meta, prijs excl. btw, hulptekst | 0,1% | |
| Vlakken en lijnen | |||||
| Wit | white | 255 255 255 | Pagina en kaarten | 46,4% | |
| Warm lichtgrijs | panel | 245 244 242 | Banden over de volle breedte, fototegels en het besteloverzicht in de winkelwagen en de checkout | 27,4% | |
| Vlak verdiept | panel-strong | 238 234 228 | Einde van het verloop op lichte promotegels | 0,2% | |
| Haarlijn | line | 231 227 221 | Kaartranden en scheidingen | 0,7% | |
| Rand sterk | line-strong | 145 139 132 | Invoervelden, hover-rand, inactieve iconen, carrouselstippen. 3,4:1 op wit | 0,2% | |
Twee letters, drie varianten. IBM Plex Sans Regular en Bold dragen de winkel, Exo Bold geeft de koppen van pagina’s, secties en actieblokken meer gevoel.
Meer dan drie varianten komen niet voor: geen Medium, geen Semibold, geen cursief en geen andere letters. Hiërarchie komt uit maat, kleur en ruimte.
IBM Plex Sans en Exo
Google Fonts, drie varianten
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 € × % , .
Tekst: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif
Display: Exo, "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif
De cijfers zijn tabulair: elk cijfer is even breed. Prijzen en maten staan recht onder elkaar.
| Werkbank | 136 × 46,3 cm | € 484,00 |
| Werktafel | 204 × 68 cm | € 625,00 |
| Newcastle | 423,5 × 68 cm | € 6.493,00 |
Productpagina: 30 px vet, centen 20 px. Op de kaart 20 px en 16 px. Oude prijs doorgehaald, prijs excl. btw grijs.
Bij het maken van een blok kies je de letter van de kop: IBM Plex Sans of Exo. Standaard is dat Exo voor paginatitels, sectiekoppen en actieblokken. Exo bestaat hier alleen in Bold en alleen voor koppen. Hieronder twee keer de hero van de homepage, met dezelfde maat en hetzelfde blok.
Standard Werkbanken
George Tools & Kraftmeister
Standard Werkbanken
George Tools & Kraftmeister
Rechthoekig en rustig. Lijnen ordenen, schaduw hoort bij interactie.
Eén kleine en één basisradius. Geen bolle app-kaarten en geen zwevende panelen.
De hoeken hieronder zijn vier keer vergroot.
2 px
Details: checkbox, markering
4 px
Invoer, tags, fototegels
6 px
Knoppen, kaarten, panelen
Rond
Alleen icoonknoppen en tellers
Beweeg over de kaarten.
shadow-sm
Knoppen en kaarten in rust.
shadow-md
Hover, menu’s en zwevende knoppen.
shadow-card
Hover van product- en lijnkaarten. De kaart verdiept, maar komt niet omhoog.
max-w-pagepx-gutterpy-sectionDe bouwstenen van de winkel, in hun echte vorm.
Elk voorbeeld gebruikt het gedeelde component van de pagina’s. Beweeg, klik en typ om de states te zien.
Minimaal 44 px hoog, 14 px vet, radius 6 px. De kleur bepaalt de rol, vorm en maat blijven voorspelbaar. Hover maakt elke knop één stap donkerder, met een iets grotere schaduw. In inhoudsblokken, zoals de showroom en de servicekaarten, en op lichtgrijze banden is de taupe knop de standaard.
Primair, de hoofdactie van een pagina. Hover #5E0000. .btn-primary
Actie, kopen en doorgaan. Hover #0E401C. .btn-positive
Basis, in inkt. Hover #1F1D1A. .btn
Neutraal, in taupe: de standaard in inhoudsblokken en op lichtgrijze banden. Hover #3B3835. .btn-neutral
Licht, op donker en op beeld. Hover lichtgrijs. .btn-light
Secundair, wit met rand. Hover: rand in inkt. .btn-secondary
Standaard
Hover, #0E401C
Focus, 2 px inkt op 2 px
Uitgeschakeld
14 px, 12 × 16
18 px, 16 × 40. De laatste stap: naar afrekenen en bestellen.
Witte velden, warme grijze rand, radius 4 px en minimaal 44 px hoog. Focus is een ring van 2 px in inkt op 2 px afstand. De velden zijn echt: klik en typ.
Zes weergaven van filters, zoals de Tweakwise-module voor Hyvä ze toont, met onze aanpassingen voor toegankelijkheid erop. Op de categoriepagina staan ze in de filterkolom, op de telefoon in de filterlade. Elk filter is een groep met een kop die open- en dichtklapt, met de aantallen rechts. Klik, sleep en typ om de states te zien.
Tweakwise: checkbox. Meer waarden tegelijk. Het getekende vakje van 18 px, in inkt als het gekozen is, met het aantal producten rechts. Wat niet past staat achter Meer tonen; hoeveel waarden eerst zichtbaar zijn, stel je per filter in.
Tweakwise: color. De module toont tegels. Wij tonen de kleuren als lijst met vakjes: het vakje van 18 px, een rond bolletje in de kleur van het product naast de naam en rechts het aantal (keuze van Tjitse, 16 oktober 2026). Een lichte kleur krijgt een rand in rand sterk, zodat het bolletje zichtbaar blijft. De naam staat er altijd bij, zodat een kleur nooit alleen aan de kleur te herkennen is. In de bouw wordt dit een template-override van de swatch-template van de module.
Tweakwise: slider. Een bereik, zoals breedte of gewicht. Twee grepen van 24 px die ook met de pijltjestoetsen werken; onder de balk de gekozen grenzen en de velden Van en Tot om een waarde te typen.
Tweakwise: slider met klikpunten en buckets. Als de slider, met boven de balk grijze staafjes: hoeveel producten elk deel van het bereik heeft. Een klik op een staafje kiest dat deel; dat gaat alleen met de muis, de grepen en de velden doen hetzelfde met het toetsenbord. Daaronder vaste punten op de schaal, als tekst met een pijltje. Vooral voor de prijs.
Tweakwise: link. Eén waarde tegelijk, als link met het aantal producten. De gekozen waarde is vet; nog eens kiezen haalt hem weg. Voor een merk of een ja-of-nee-filter.
Tweakwise: tree. Alleen voor het categoriefilter, op een pagina zonder de pillen “Ga snel naar”: een zoekresultatenpagina of een hoofdcategorie. De categorieën als geneste lijst van links, altijd open, met het aantal producten; de huidige categorie is vet. Op de categoriepagina’s staat hij niet: daar zijn de pillen de navigatie.
Het belangrijkste component van de winkel. Echte producten, echte foto’s en gemeten gegevens. Beweeg over een kaart voor de hover.
Wat op de kaart echt status aangeeft. Korting toont de winkel als doorgehaalde oude prijs, met op de foto een kortingslabel (Productlabels).
Eén rood voor elke korting: logorood #E20613, het rood van “20% korting” in versie 2. De live site heeft geen sale-sticker op kaarten; kortingen staan als afbeelding in banners. Als label in HTML:
Op de productpagina staat de reden van de korting in hetzelfde label, direct na de doorgehaalde prijs. De prijs excl. btw krijgt dan een eigen regel.
Staffelprijzen zijn geen label. Ze staan direct onder de prijs als keuzelijst “Kies je aantal”: één rij per aantal, 1 stuk eerst, in de kaart van de combi-deal met een keuzerondje in inkt. De gekozen rij krijgt een inktrand. Het aantal gedempt, de prijs per stuk vet, “per stuk” en de korting als gewone tekst, zonder prijs excl. btw. Een rij kiezen zet het aantal; vanaf het aantal van een staffel toont de prijs de staffelprijs per stuk.
De labels van de module Product labels van Vendic. Ze staan linksboven op de productfoto, onder elkaar: op elke productkaart in een grid of slider en op de eerste foto van de productpagina. Hoogstens drie per product, in deze volgorde. De witte tekst haalt op elk label minstens 4,5:1.
Kraftmeister Premium werkplaatsinrichting Montreal RVS rood
Kraftmeister Premium werkplaatsinrichting Montreal RVS rood
Een label komt nooit over het hartje en is geen knop: een klik gaat naar het product, zoals op de foto. Op de kaart staan de labels in de code na de titel, zodat een schermlezer ze bij het product voorleest; op de productpagina staan ze bij de foto’s.
De vier meldingen van Magento. Rechtsboven onder de kop, over de pagina heen: 400 px breed, op de telefoon over de volle breedte. Een lichte tint per soort, het icoon in zijn kleur, tekst in inkt, een haarlijn, radius 6 px en de schaduw van een menu. Gelukt en info verdwijnen na 5 seconden, behalve met een link; let op en fout blijven staan tot je ze sluit, met het kruisje of met Escape.
Gelukt: George Tools gereedschapstrolley zwart is toegevoegd aan je verlanglijst.
Info: De prijzen in je winkelwagen zijn bijgewerkt.
Let op: Eén product in je winkelwagen is pas over 3 tot 4 weken leverbaar.
Fout: Er zijn nog 3 stuks op voorraad. Pas het aantal aan en probeer het opnieuw.
De terugkerende bouwstenen van winkelen.
De beoordeling van Trusted Shops staat voorop. Op de telefoon schuift de balk: één voordeel tegelijk, elke vijf seconden het volgende van rechts, met links een pauzeknop.
Op de telefoon, onder 1024 px, drie knoppen op één regel:
Sortering opent een paneel van rechts, zoals Filters. Een keuze sorteert meteen; Toon producten sluit het paneel.
Huidige pagina: leesrood op roodtint.
Vragen die openklappen, op de categorie- en productpagina en in de klantenservice. Een haarlijn tussen de vragen, geen kader per vraag. De vraag is vet in inkt en kleurt bij hover leesrood, het antwoord is lopende tekst in gedempt. Elk antwoord staat in de pagina, ook als de vraag dicht is.
Dat hangt af van de lijn: 2 jaar op George Tools en Kraftmeister Standard, 5 jaar op Kraftmeister Premium, 10 jaar op Kraftmeister Pro en 20 jaar op Kraftmeister Expert; bij 5, 10 en 20 jaar neemt de dekking na de eerste jaren af.
Lees alle voorwaarden op de garantiepagina.
Kies eiken als je vooral met gereedschap aan de werkbank werkt. Kies RVS als je veel met vloeistoffen werkt. Beide werkbladen zijn gemaakt voor intensief gebruik.
Een complete set komt meestal op pallets, met Rabelink Logistics. De vervoerder mailt je 1 à 2 dagen van tevoren de datum en het tijdsblok, en levert tot aan de eerste drempel.
Het reviewblok op de productpagina, met de productreviews die Trusted Shops verzamelt. Naast het gemiddelde staat het keurmerk van Trusted Shops: wie de reviews verzamelt, dat ze gecontroleerd worden en een link naar meer informatie. Het cijfer van 1 tot 10 staat als tekst naast vijf sterren: één ster is twee punten. De gevulde sterren hebben het geel van de Trusted Shops-sterren, de lege de kleur rand sterk. Geel haalt 1,5:1 op wit, dus het cijfer staat er altijd naast. Alle reviews staan in één lijst, de nieuwste eerst, met een haarlijn ertussen en geen kaarten. Een review uit de Duitse winkel is eerst een witte knop, die de originele tekst toont; de regel eronder noemt de winkel. Foto’s van de klant staan onder de tekst als vierkantjes van 72 px, zoals de kleine foto’s van de productgalerij, en openen groot. Zes reviews zijn zichtbaar. De taupe knop, met de chevron voor de tekst, toont alle reviews en heet dan “Toon minder reviews”, met de chevron omhoog; die gaat terug naar de eerste zes. Op de telefoon opent de knop alle reviews in een lade van rechts, dezelfde als de filterlade, zodat de pagina niet langer wordt. Er is geen knop om een review te schrijven: Trusted Shops vraagt de koper per e-mail om een review.
8,6 van 10, 100 reviews
Reviews verzameld door Trusted Shops Een onafhankelijke dienst die maatregelen neemt tegen nepreviews. Meer informatie over de reviews bij Trusted Shops
9 van 10
“Het werkblad met de eikenlook is dik en ziet er warm uit tegen het zwarte frame.”
Geplaatst op door Marieke
7 van 10
Geplaatst op door Jürgen via georgeatwork.de
6 van 100 reviews
De tweede servicekaart op de homepage. De foto vult de linkerhelft van rand tot rand. Rechts staan de kop in de displayletter, één regel, de voordelen als USP-lijst en het formulier: het e-mailveld van de checkout met een zichtbaar label, een hint over afmelden met de privacyverklaring, en de taupe knop. Een fout staat onder de hint in leesrood. Na het inschrijven vervangt de groene melding van de checkout het formulier. Probeer het: een fout adres geeft de foutmelding, een goed adres de bevestiging.
Schrijf je in voor onze nieuwsbrief.
Eén YouTube-video in de tekst van een categorie- of productpagina. De marketeer zet hem met een widget tussen de alinea’s en vult alleen de YouTube-link in. De video krijgt de breedte van de tekst, in 16:9, met 6 px afronding en een haarlijn. Tot de klik is hij één foto, de HD-afbeelding van YouTube, met de afspeelknop van de productgalerij: rond, merkrood, met schaduw. De klik start de video in hetzelfde vak. Het bijschrift staat onder de foto, nooit erop: de titel vet, de duur gedempt.
Onder 768 px is de vraagbalk een lijst: bellen, chatten, mailen en de klantenservice, elk met één korte regel eronder. De collega’s staan ernaast op de bovenlijn van de footer. De USP-balk en de beoordeling staan op de telefoon al in de topbalk, dus niet in de vraagbalk.
Onder 768 px klappen de groepen van de footer in, met een dunne lijn ertussen. Klantenservice staat open, zodat de belangrijkste links meteen te zien zijn. Vanaf 768 px zijn het open kolommen.
Heroicons in de outline-stijl: getekend op 24 px, lijndikte 2, ronde uiteinden. Ze volgen de tekstkleur currentColor.
Het product staat centraal, in een werkplaats die echt is.
Studio-belicht op een industriële achtergrond, of in gebruik bij klanten. Dit hoofdstuk is een voorstel op basis van de bestaande fotografie.
Direct, deskundig en benaderbaar. Je helpt een vakman of serieuze klusser kiezen, je verkoopt geen lucht.
Nederlands, actief en concreet. Wat hieronder live staat, is zo gemarkeerd.
Actief en concreet. Live.
Live.
Geen resultaten.
Pas je filters aan of zoek anders.
Voorstel. Zeg wat er is en wat de klant nu kan doen.
Dit merkboek bouwt voort op georgeatwork.nl. Het karakter blijft, het systeem wordt consistenter.
Eerst wat versie 3 verandert na de feedback op versie 2, daarna alles wat het merkboek vastlegt of verandert ten opzichte van de live site.
| Onderwerp | Versie 2 | Versie 3 |
|---|---|---|
| Displayletter | Versie 2Geen displayletter. Een hero blijft IBM Plex Sans Bold. | Versie 3Exo Bold voor paginatitels, sectiekoppen en koppen in actieblokken, per blok te kiezen naast IBM Plex Sans. |
| Lettervarianten | Versie 2IBM Plex Sans in vier gewichten en cursief, IBM Plex Mono in de documentatie. | Versie 3Maximaal drie: IBM Plex Sans Regular, IBM Plex Sans Bold en Exo Bold. Medium, Semibold, cursief en IBM Plex Mono vervallen. |
| Koppen | Versie 2In inkt #2E2B26, net als de tekst. | Versie 3Koppen en titels in staal #293133, de kleur van de navigatiebalk en de footer. Tekst en producttitels blijven inkt. |
| Navigatiebalk en footer | Versie 2Staal #293133. | Versie 3Ongewijzigd: staal #293133, nu ook de kleur van de koppen. |
| Productlabels | Versie 2Geen labels op de productfoto. | Versie 3Linksboven op de productfoto, onder elkaar, hoogstens drie: korting in logorood (alleen op de kaart), “Nieuw” in staal, “Bestseller” in oker, “Outlet” in taupe. Nooit over het hartje. Voorstel |
| Kortingslabels | Versie 2Twee roden: salerood #E20613 en merkrood #800001. | Versie 3Eén rood voor elke korting: logorood #E20613, het salerood van versie 2. Merkrood #800001 blijft voor de hoofdknop, de zoekknop en links. |
| Randen | Versie 2Rand sterk #B8B1A8, 2,1:1 op wit. Te licht voor de rand van een invoerveld. | Versie 3Rand sterk #918B84, 3,4:1 op wit. Invoervelden, carrouselstippen en het hartje halen de 3:1 voor bedieningselementen (WCAG 1.4.11). |
| Meldingen | Versie 2Een donkere toast onderaan in het midden, alleen voor een bevestiging, 2,4 seconden. | Versie 3Vier soorten rechtsboven onder de kop: gelukt in groentint, info wit, let op in geeltint met een oker icoon, fout in roodtint met een logorood icoon. Gelukt en info verdwijnen na 5 seconden, let op en fout blijven staan. Oker en geeltint zijn nieuw. |
| Filters | Versie 2Een vakje om aan te vinken, een bolletje met de kleur naast het vakje, en een slider met twee grepen. | Versie 3Zes weergaven van Tweakwise: checkbox, kleur (tegels met de kleur, de naam en het aantal), slider, slider met klikpunten en de verdeling erboven, lijst (één keuze, als link) en boom (de categorieën, alleen waar geen pillen staan). Voorstel |
| Besteloverzicht | Versie 2Een witte kaart in de checkout, met vette labels en een groene knop van 16 px. | Versie 3Een warm lichtgrijs vlak in de winkelwagen en de checkout. Het label staat gedempt, het bedrag in inkt. De laatste stap is de grote knop: 18 px, over de hele breedte. Voorstel |
| Onderwerp | Live site | Merkboek |
|---|---|---|
| Logo | Live siteAlleen op wit. Vrije ruimte, minimumformaat en een versie voor donkere vlakken zijn niet vastgelegd. | MerkboekVrije ruimte rondom minimaal de hoogte van de cirkel. Een aparte lichte versie voor donkere vlakken. Voorstel |
| Rood | Live siteEen lichter linkrood en een eigen salerood. | MerkboekHet diepe merkrood blijft voor de hoofdknop. Linkrood wordt donkerder voor betere leesbaarheid (#A6141A). Het felle logorood (#E20613) is het rood van elke korting, de onderstreping in de navigatie en het actieve hartje. |
| Donker en grijs | Live siteVier bijna gelijke donkere tinten en losse, bijna gelijke grijzen. | MerkboekDrie donkere tinten met elk een taak: inkt #2E2B26 voor tekst, staal #293133 voor koppen, navigatiebalk, footer en het label “Nieuw”, en taupe #4A4743 voor de neutrale knop. Eén warme reeks neutrale tinten, zonder dat de winkel beige wordt. Mascottegeel #FFD400 hoort alleen bij het logo. |
| Letter | Live siteNoto Sans. | MerkboekIBM Plex Sans in Regular en Bold: dezelfde toegankelijke basis, meer eigen karakter en tabulaire cijfers. Exo Bold als displayletter voor paginatitels, sectiekoppen en koppen in actieblokken, per blok te kiezen. Samen drie varianten, meer niet. |
| Vorm | Live siteWisselende radii en schaduw op statische vlakken. | Merkboek6 px voor kaarten, knoppen en panelen, 4 px voor invoer, tags en kleine labels, 2 px voor details. Schaduw alleen voor interactieve elementen en overlays, statische vlakken krijgen een haarlijn. Ruimte in stappen van 8, 12, 16, 24 en 48 px. |
| Knoppen | Live site.btn-primary is taupe, de basisknop heeft een eigen kleur en er staat nog een blauwe Tailwind-kleur. | MerkboekEén primaire knop en die is rood. De taupe knop heet .btn-neutral, de basisknop is inkt. Elke knop heeft één donkerdere hoverkleur, de blauwe kleur verdwijnt. Alle hoofdknoppen minimaal 44 px hoog, met dezelfde focusring. |
| Formulieren | Live siteNiet vastgelegd. | MerkboekFilters gebruiken de getekende .checkbox van 18 px in inkt, de combideal de groene .checkbox-positive van 22 px. De checkout houdt native checkboxen en radioknoppen in actiegroen. Invoer en selects delen hoogte en rand, zonder schaduw. |
| Labels | Live siteGeen sale-sticker op kaarten, kortingsbadges alleen als afbeelding in banners. | MerkboekLabels als HTML-component: logorood voor elke korting, staal voor “Nieuw”, oker voor “Bestseller” en taupe voor “Outlet”. Productlabels staan linksboven op de productfoto. Voorstel |
| Beeld en taal | Live siteNiet vastgelegd. | MerkboekDe richtlijnen in de hoofdstukken Beeld en Taal, afgeleid van de bestaande fotografie en teksten. Voorstel |
| Meldingen | Live siteDe standaard van Hyvä: een balk over de volle breedte onder de kop, in de pagina, met een rand en een tint in de kleuren van Tailwind (groen, blauw, oranje, rood), halfvette tekst en een sluitknop die “Close message” heet. | MerkboekRechtsboven onder de kop, over de pagina, in de kleuren van het merk. Alleen gelukt en info verdwijnen vanzelf. De sluitknop heet “Melding sluiten”. |
| Sorteren op de telefoon | Live siteEen knop Filters en een keuzelijst met de vijf sorteringen naast elkaar, onder de introtekst en het keuzehulpblok. Op de telefoon staan de producten daardoor pas onder het eerste scherm. | MerkboekOnder 1024 px geen introtekst en geen keuzehulpblok boven de producten. Filters, Sortering en Keuzehulp staan als drie knoppen op één regel, het icoon voor de tekst. Sortering opent een paneel van rechts met de vijf sorteringen als keuzerondjes in inkt; een keuze sorteert meteen. Vanaf 1024 px dezelfde keuzelijst als live, zonder pijlknop. |