Intro
Lister brukes til å presentere innhold på en kortfattet og oversiktlig måte, for eksempel for å oppsummere hovedpoengene i en tekst.
Egnet til:
- Oppsummere lengre tekster
- Liste opp kriterier
Uegnet til:
- Lengre innhold egner seg ikke i en liste
- Rikt innhold som bilder og video bryter opp flyten i en liste
Eksempler
Husk å sette riktig heading-nivå/tag hvis du bruker en title.
Husk å sette aria-hidden på ikonet.
Varianter
Usortert eller sortert liste
En usortert liste brukes når det ikke er noen bestemt rekkefølge på innholdet. Hvis det er viktig at en bruker forstår grader av viktighet, et hendelsesforløp eller lignende, bør du bruke en sortert liste.
Liste med ikoner
Komponenten vår støtter visning av ikoner istedenfor punkter på usorterte lister. Vær oppmerksom på at vi ikke har støtte for ikoner i sorterte lister, da dette gir utfordringer for skjermlesere.
Retningslinjer
Les mer om hvordan du formaterer lister under "Tegnsetting i punktlister".
Form og struktur
Alle elementer i en liste bør ha samme form og struktur.
Forbokstav og tegnsetting
Ofte er hvert punkt en fortsettelse av innledningen. Da er det liten forbokstav i punktene, ikke kolon etter innledningen og ikke noe tegn til slutt på hvert punkt. Unntaket er når punktene er hele setninger. Da skal det være stor forbokstav i det første ordet og punktum til slutt på hvert punkt.
Tilgjengelighet
Bruk liste og tabell riktig
Lister og tabeller har forskjellige bruksområder. Riktig bruk gjør opplevelsen tydelig for alle brukere, spesielt for de med kognitive og læringsvansker, eller de som bruker skjermlesere.
- En liste presenterer relatert informasjon på en oversiktlig måte.
- En tabell lar brukeren se og sammenligne flere grupper av informasjon
Props
List
- as?"ul" | "ol"
- HTML list element to render
- title? string
- List heading title
- description? string
- List heading description
- headingTag?ElementType<any>
- Allows setting a different HTML h-tag
- size?"medium" | "small"
- Changes padding, height and font-size
- className? string
List.Item
- as?"ul" | "ol"
- HTML list element to render
- title? string
- List heading title
- description? string
- List heading description
- headingTag?ElementType<any>
- Allows setting a different HTML h-tag
- size?"medium" | "small"
- Changes padding, height and font-size
- className? string
Tokens
Token | Fallback |
---|---|
--ac-list-marker-ul-color | --ac-list-marker-color |
--ac-list-marker-icon-color | --ac-list-marker-color |
--ac-list-marker-ol-color | --ac-list-marker-color |
--ac-list-marker-color | --a-icon-default |