Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

List

Lister brukes til å presentere innhold på en kortfattet og oversiktlig måte, for eksempel for å oppsummere hovedpoengene i en tekst.

StabilOppdatert 9. mai 2025

Egnet til:

  • Oppsummere lengre tekster
  • Liste opp kriterier

Uegnet til:

  • Lengre innhold
  • Rikt innhold som bilder og video (det bryter opp flyten i en liste)

Eksempler

Retningslinjer

Punktliste eller nummerert liste

En punktliste 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 nummerert liste.

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

Liste med ikoner

I punktlister er det mulig å bytte ut punktene med ikoner. Vær oppmerksom på at vi ikke har støtte for ikoner i nummererte lister.

Props

List

as?

  • Type:
    "ul" | "ol"
  • Default:
    ""ul""
  • Description:

    HTML list element to render.

size?

  • Type:
    "small" | "medium" | "large"
  • Default:
    ""medium""
  • Description:

    Changes margin-block on list and font size on items.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

title?

  • Deprecated:
    Use a "plain" <Heading> instead of `title`, Composition of smaller components preferred over smarter components.
  • Type:
    string
  • Description:

    List heading title.

description?

  • Deprecated:
    Use a "plain" <BodyShort> instead of `description`, Composition of smaller components preferred over smarter components.
  • Type:
    string
  • Description:

    List heading description.

headingTag?

  • Deprecated:
    The `title` prop gets deprecated, so this one follows suit, as it was a supplementary prop to the title.
  • Type:
    ElementType<any, keyof IntrinsicElements>
  • Default:
    "h3"
  • Description:

    Allows setting a different HTML h-tag.

List.Item

children

  • Type:
    ReactNode
  • Description:

    List item content.

title?

  • Type:
    string
  • Description:

    List item title.

icon?

  • Type:
    ReactNode
  • Description:

    Icon to be used instead of bullet (unordered lists only).

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLLIElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

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