Lister

Bruk av lister

Lister brukes til å gruppere og organisere informasjon sånn at de er lettere å lese. Lister kan også hjelpe med å fremheve innhold som ellers kunne blitt borte i en lenger tekst. Trenger du en overskrift til listen, så husk å bruke riktig semantiske heading-tag, men med «ffe-h4»-klassen.

BulletList

BulletList er en unummert liste, og kan brukes i situasjoner der du ønsker å vise frem informasjon i en liste. For å bruke denne komponenten riktig må du også ta i bruk «BulletListItem»-komponenten, som representerer ett punkt i listen.

CheckList

CheckList er også en unummert liste som brukes i tilfeller der man ønsker å vise f.eks hva som er inkludert i en tjeneste og ikke. For å få riktig ikon og formatering, kan du bruke CheckListItem-komponenten til hvert punkt på listen. Ønsker du ett X isteden trenger du bare å legge inn «isCross» som prop.

Det er også mulig å spre innholdet ut over 2 kolonner der det er plass til det, ved å sende med en «columns» prop.

DetailListCard

DetailListCard er en listetype der hvert listeelement inneholder en etikett (label) og en verdi (value). Hele listen vises i et kort. Komponenten består avDetailListCard, som er containerelementet og selve kortet, i tillegg til DetailListCardItem, som er hvert listeelement.

DetailListCardItem tar inn propsene label og value. Sistnevnte tillater et React/JSX-element eller en string. label inneholder etiketten til venstre i kortet i et dt-element, mens value inneholder verdien til høyre i et dd-element.

Siden det er mulig å sende med React/JSX-element, kan du blant annet bruke andre FFE-komponenter i listen.

For å oppfylle WCAG-krav om minimum størrelse på klikkbare flater vil alle lenker og knapper få en minimum størrelse på 24px, som vist i eksempelet under:

DescriptionList

DescriptionList er en liste der du kan sette et «begrep» og en beskrivelse. Et eksempel er oppramsing av personalia, der man har gatenavn som begrep og den faktiske adressen som beskrivelse. Består av komponentene DescriptionListTerm og DescriptionListDescription, som brukes til å få riktig semantisk oppbygging av listen.

Horizontal

Viser «begrep» og beskrivelse på en linje.

Medium og large

DescriptionListMultiCol

Det er også mulig å bruke DescriptionListMultiCol for vise listen over to kolonner.

NumberedList

Nummererte lister brukes i tilfeller der du vil informere om ting der rekkefølgen er viktig. Et eksempel er en registreringsflyt, eller bare instruksjoner der det er viktig å gjøre ting i en bestemt rekkefølge. NumberedListItem er komponenten som brukes til selve listeelementene.

StylizedNumberedList

En mer stylet versjon av NumberedList. Bruker StylizedNumberedListItem på selve listeelementene.