Hopp til innhold

List

Lister er strukturelementer. De gjør at vi kan utheve viktig informasjon for brukerne eller fortelle dem at de må gjøre noe i en bestemt rekkefølge.

  1. Steg 1
  2. Steg 2
    1. Steg 2a
    2. Steg 2b
  3. Steg 3
  4. Steg 4

Nummererte lister

Vi bruker nummererte lister når vi skal presentere instruksjoner, der rekkefølgen er viktig.

Unummererte lister

I unummererte lister bruker vi kulepunkter. Formålet med en slik liste er å organisere informasjonen og fremheve viktige opplysninger. Her er ikke rekkefølgen brukeren skal utføre noe i viktig, men vi må likevel passe på at vi presenterer det innholdet som er mest relevant først.

Om listeelementet ditt starter med en bold tekst og et kolon er det et godt tegn på at du kanskje heller bør bruke DescriptionList.

Innrykk i lister

Vi kan bruke innrykk under et enkelt listepunkt når det punktet har tilleggsinformasjon som vi må dele opp videre. Men bruk det sparsommelig. Før du bruker det, tenk nøye over om dette er et hovedpunkt som kan stå for seg selv, eller om det er informasjon som passer best som underpunkt. Selvstendige punkter skal ikke ha innrykk.

  1. Hvem skriver du for?
    • Vurder hvem som er målgruppen din.
    • Hvor skal mottakeren lese teksten? På en nettside eller et digitalt skjema?
  2. Hva er målet med teksten?
    • Gjør budskapet tydelig fra begynnelsen av.
    • Tenk på hva mottakeren vet fra før. Ta bare med det som er nødvendig.

Riktig

Passende underpunkter

  • Melk
  • Ost
    • Blåmuggost
    • Feta

Feil

Underpunkter kunne vært selvstendige

Lister med ikon

Vi bruker lite ikoner i profilen, men det er enkelte unntak. Brukes typisk i en oversikt over hva som er dekket og hva som ikke dekkes.

React API

Her finner du en oversikt over props på komponentene i pakken.