Lister
Lister kan brukes til å gruppere og organisere informasjon
Bruk av lister
Lister brukes til å gruppere og organisere informasjon slik at den er lettere å lese. Lister kan også hjelpe med å fremheve innhold som ellers kunne blitt borte i en lengre tekst. Trenger du en overskrift til listen, så husk å bruke riktig semantisk 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 et 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 et 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 av DetailListCard
, som er container-elementet 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.