Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

List

Oppdatert 3. september 2023Stabil
GithubYarn FigmaEndringslogg

    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

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    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.

    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

    • Table thumbnail
      Table

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack