Test- och demomiljö. Funktioner och innehåll kan förändras.
Exempel
Komponenter och block
Sidan visar designsystemets byggstenar som de ser ut i blockredigeraren. Allt innehåll är exempeltext och används för att testa layout och formgivning.
Typografi
Rubriker och brödtext
Rubrik på nivå tre
Brödtexten är satt för läsbarhet: en tydlig radlängd, generöst radavstånd och tillräcklig kontrast mot bakgrunden. Den här meningen är exempeltext.
Rubrik på nivå fyra
Länkar i löptext är understrukna, som den här länken till Demo och tester, så att de går att skilja från övrig text även utan färg.
Ingress: en inledande text som sammanfattar sidans innehåll och är något större än brödtexten.
Liten text används för kompletterande upplysningar, till exempel källor och förbehåll.
Listor
Fyra sorters listor
Punktlista
- Första punkten
- Andra punkten med lite längre text som bryts över flera rader på smala skärmar
- Tredje punkten
Numrerad lista
- Första steget
- Andra steget
- Tredje steget
Arbetssteg
- Steg ettKort beskrivning av första steget.
- Steg tvåKort beskrivning av andra steget.
- Steg treKort beskrivning av tredje steget.
Specifikation
- Egenskap ABeskrivning av egenskapen.
- Egenskap BBeskrivning av egenskapen.
- Egenskap CBeskrivning av egenskapen.
- Egenskap DBeskrivning av egenskapen.
Interaktion
Knappar och länkar
Bild
Bild och text
Bildsektion
Bild och text i två kolumner. På mobil läggs bilden ovanför texten. Bilder som bara pryder har tom alt-text, medan bilder som tillför information beskrivs.
Kort
Kort i tre kolumner
Exempel
Kort ett
Kort används för likvärdiga, fristående poster som ska kunna jämföras.
Exempel
Kort två
Kort används för likvärdiga, fristående poster som ska kunna jämföras.
Exempel
Kort tre
Kort används för likvärdiga, fristående poster som ska kunna jämföras.
Information
Informationsrutor och utfällbara rutor
Informationsruta
Används för upplysningar som ska synas tydligt men inte störa läsningen.
Vad är en utfällbar ruta?
Ett block som döljer kompletterande text tills besökaren väljer att visa den.
Fungerar den med tangentbord?
Ja. Rubriken kan nås med Tabb och öppnas med Enter eller mellanslag.
När passar den?
För vanliga frågor och detaljer som inte alla besökare behöver.
Data
Tabell och citat
| Komponent | Blockstil | Användning |
|---|---|---|
| Sektion | Sektion – ljus, vit eller mörk | Fullbred bakgrund och luft runt innehållet |
| Överrubrik | Överrubrik | Kort etikett ovanför en rubrik |
| Arbetssteg | Arbetssteg | Numrerad lista med linje mellan stegen |
| Informationsruta | Informationsruta | Framhävd upplysning |
Ett citat lyfter fram en mening ur texten. Det här är exempeltext.
Exempelkälla
Kontrast
Mörk sektion
Mörka sektioner används sparsamt för att dela av innehåll. Text och länkar har anpassade färger för god kontrast.