Prototype – niet onderdeel van het ontwerpPrototype – not part of the design
Randgevallen en componentstatussenEdge cases and component states
Dezelfde componenten als op de pagina, met extreme inhoud naast elkaar. Probeer je eigen inhoud in de playground. Elke sectie eindigt met Voor ontwikkelaars: de regel achter elk gedrag en waar die staat, zodat je het bij het overzetten naar het thema niet kwijtraakt.
The same components as on the page, with extreme content side by side. Try your own content in the playground. Every section ends with For developers: the rule behind each behaviour and where it lives, so it survives the port into the theme.
Playground
Typ je eigen inhoud en zie direct wat de component ermee doet. De breedte-schuif maakt alleen de kolom smaller; stijlen per breakpoint volgen het venster, dus gebruik voor de telefoonstijl de weergave "Smal en breed naast elkaar". Onder elke preview staat de gerenderde HTML.
Type your own content and see what the component does with it. The width slider only narrows the column; breakpoint styles follow the window, so use "Narrow and wide side by side" for the phone styles. The rendered HTML sits under each preview.
Gerenderde HTMLRendered HTML
Gerenderde HTMLRendered HTML
Gerenderde HTML – na de sanitizerRendered HTML – after the sanitizer
Intro – CategoryTitle en CategoryDescriptionIntro – CategoryTitle and CategoryDescription
Rich text, kort en lang, een woord zonder spaties, de grootte-, uitlijning- en lettertype-instellingen, alleen een titel, en wat de sanitizer met onveilige opmaak doet.
Rich text, short and long, a word without spaces, the size, alignment and font settings, a title on its own, and what the sanitizer does with unsafe markup.
Breadcrumb
Kort en diep pad, en een lange laatste kruimel op volle breedte en op telefoonbreedte.
Short and deep paths, and a long last crumb at full width and at phone width.
ProductkaartenProduct cards
Titels zijn afgekapt op twee regels (de hoogte blijft gereserveerd zodat prijzen op één lijn staan); prijzen, labels, categorienamen en de laatste kruimel worden op één regel afgekapt; woorden zonder spaties breken af in plaats van de kaart op te rekken.
Titles are clamped to two lines (the height stays reserved so prices line up); prices, tags, category names and the last breadcrumb truncate on one line; words without spaces break instead of stretching the card.
Banners
Titel en ondertitel maximaal vier regels; de knoptekst blijft op één regel en wordt afgekapt met een beletselteken. Zonder afbeelding valt de banner terug op $grey-dark zodat de witte tekst leesbaar blijft.
Title and subtitle are at most four lines; the button text stays on one line and is cut off with an ellipsis. Without an image the banner falls back to $grey-dark so the white text stays readable.
Lange teksten, zonder titel, te weinig slides om te scrollen, slides zonder link en met tags. Sleep met de muis of gebruik de pijlen.
Long texts, no title, too few slides to scroll, slides without a link and with tags. Drag with the mouse or use the arrows.
Filters
Ingeklapt, uitgeklapt met selectie, maximale inhoud (ingeklapt en volledig uitgeklapt), uitgeschakelde opties en een groepsnaam die niet past. Onder 1200px zit het echte filterpaneel in een uitschuifpaneel; deze kopieën staan stil.
Collapsed, open with a selection, maximum content (collapsed and fully expanded), disabled options and a group name that doesn't fit. Below 1200px the real filter panel is off-canvas; these copies stay static.
GridstatussenGrid states
Geen resultaten, een laadfout en elke stand van de knop "Toon meer".
No results, a loading error and every state of the "Toon meer" (show more) button.
Knoppen en bedieningButtons and controls
Links, rechts en verdeeld uitgelijnd, met lange labels en uitgeschakelde varianten. De smalle rijen zijn 343px breed – de inhoudsbreedte op een 375px-telefoon.
Aligned left, right and split, with long labels and disabled variants. The narrow rows are 343px wide – the content width on a 375px phone.
Links uitgelijndAligned left
Rechts uitgelijndAligned right
Verdeeld (zoals onderaan het filterpaneel)Split (like the bottom of the filter panel)
Lang label, smal – afbreken over regelsLong label, narrow – wrap over lines
Lang label, smal – afkappen op één regelLong label, narrow – truncate on one line
Rich text in de categoriebeschrijvingRich text in the category description
De beschrijving is een RTE-veld en gaat door HtmlContentSanitizer. Die laat style en class niet door, dus uitlijning per alinea vanuit de editor is niet mogelijk. De hele beschrijving lijnt wel links, midden of rechts uit met de instelling "Uitlijning beschrijving" in het paneel. Graphik heeft geen Semibold Italic, dus vet + cursief wordt door de browser schuin gezet.
The description is an RTE field and goes through HtmlContentSanitizer. It strips style and class, so aligning a single paragraph from the editor is not possible. The whole description does align left, center or right with the "Description alignment" setting in the panel. Graphik has no Semibold Italic, so the browser slants bold + italic itself.