Aksel

Meny

Komponenter / Core

List

Oppdatert Stabil
GithubYarn FigmaEndringslogg

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

Har du innspill til komponenten?

Send forslag

Eksempler

Åpne eksempel i nytt vindu

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.

GjørNummerert liste som viser fremgangsmåten til en oppskrift.
UnngåNummerert liste som viser ingrediensene til en oppskrift (ikke gjør dette).

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.

GjørUnummerert liste med tittel "Ferieplaner" og tre kulepunkter: "Reise til eksotiske destinasjoner." "Utforske nye kulturer og tradisjoner." "Være hjemme og slappe av."
UnngåUnummerert liste med tittel "Ferieplaner" og tre kulepunkter, hvor teksten er skrevet på forskjellige måter: "Reise til eksotiske destinasjoner." "å utforske nye kulturer og tradisjoner" "hjemme og slapper av"

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.

GjørPunktliste med leddsetninger.
Her er hvert punkt en fortsettelse av innledningen. Derfor er det liten forbokstav i punktene, ikke kolon etter innledningen og ikke noe tegn sist i hvert punkt.
GjørPunktliste med leddsetninger.
Her er punktene hele setninger. Derfor skal det være stor forbokstav i det første ordet og punktum sist i 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

TokenFallback
--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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter