Vet, cursief, vet en cursief, onderstreept en een link naar de showroom.
Een link met een heel lange URL-achtige tekst: tabledusud.nl/eettafels/massief-eiken/ovaal/deens-ovale-eikenhouten-eettafel-dida
Randgevallen en componentstatussenEdge cases and component states
Dezelfde componenten als op de pagina, met extreme inhoud naast elkaar. Gebruik het paneel op de pagina om die zelf door dezelfde statussen te laten lopen, of open de viewport-weergave om smal en breed tegelijk te vergelijken.
The same components as on the page, with extreme content side by side. Use the panel on the page to run it through the same states, or open the viewport view to compare narrow and wide at once.
ProductkaartenProduct cards
Titels zijn afgekapt op twee regels (de hoogte blijft gereserveerd zodat prijzen op één lijn staan); 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); 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.
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.
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.
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.
OpmaakFormatting
LijstenLists
- Massief eiken, noten of fenix unicolor
- Een lijstitem dat zo lang is dat het over meerdere regels doorloopt en netjes onder de eerste tekst moet uitlijnen
- Kies je vorm
- Kies je maat en materiaal
Uitlijning – niet ondersteundAlignment – not supported
Ingevoerd als gecentreerd (style="text-align:center") – na de sanitizer links.
Entered as centred (style="text-align:center") – left-aligned after the sanitizer.
Ingevoerd als rechts uitgelijnd – na de sanitizer links.
Entered as right-aligned – left-aligned after the sanitizer.