DescriptionList

Egnet til:

• å liste opp en samling av ikke-interaktive opplysninger i seksjoner eller bokser. 
• å fordele opplysninger over flere kolonner.
• oppsummering av verdier før innsending av skjema

Uegnet til:

• skjemaer med vanlig innsending og hvor det er naturlig å «tabbe» seg gjennom. Bruk i Textfield i readonly-tilstand i stedet. 

Komponenter som ligner:

• TextField i readonly-tilstand.

Teknisk dokumentasjon

Se DescriptionList i Storybook for tekniske detaljer.

Varianter

Vertikal og horisontal

DescriptionList finnes i både horisontal og vertikal visning. Vertikal visning lister elementene opp i en kolonne nedover på siden. Den fungerer ofte godt på mobil. Horisontal visning trenger litt plass i bredden, og fungerer best på større skjermer. Den bruker den plassen den får og fordeler inneholdet i kolonner. 

Vertikal visning 

Horisontal visning

Størrelse

Komponenten finnes i small og medium størrelse. Small brukes kun i spesielle tilfeller hvor det er lite plass.

Uthevet tekst

Standard oppførsel er at ledetekst er uthevet. Dette er mulig å endre om det er behov for at verdien skal være uthevet (bold) i stedet. 

Hvordan bruke komponenten  

Vi anbefaler DescriptionList på steder hvor du har behov for å vise grupper av informasjon, for eksempel i bokser, oppsummeringer, kort eller liknende. 

Vertikal visning på mobil

Vertikal visning er ofte å foretrekke på små skjermer. Hvis funksjonen isVerticalOnMobile er aktiv, bytter komponenten automatisk til vertikal visning på mobil.  

DescriptionList i oppsummeringssteg

DescriptionList i kort eller bokser

Universell utforming  

• Komponenten er bygget opp av dl og dt-elementer, med krav om at begge elementer har verdi (required).