Viktig informasjon

Delar av dette innhaldet er ikkje tilgjengeleg på nynorsk enno.

Divider

Ny

Pakke: ds-content

Divider (delelinje) brukes til å visuelt skille innhold fra hverandre. Det er en enkel horisontal linje som strekker seg over bredden den har tilgjengelig.

Eksempler

Delelinje ved summering

Divider i temaoverskrift

Egnet til:

  • å skape en tydelig oppdeling av innhold, for eksempel under en temaoverskrift.
  • å strukturere innhold for bedre lesbarhet
  • å lage ytterligere skille der luft ikke kraftig nok effekt. 

Uegnet til:

  • å bruke der naturlig spacing eller andre visuelle elementer gir tilstrekkelig skille
  • å brukes mange ganger nær hverandre, da det kan gi et rotete uttrykk. 

Teknisk dokumentasjon

Se Divider i Storybook for tekniske detaljer

Varianter

Divider finnes som nedtonet med 50 % gjennomsiktighet (standard), samt en uthevet variant uten gjennomsiktighet.

Hvordan bruke komponenten  

Unngå å bruke delelinjer utelukkende som en visuell effekt uten funksjonell betydning. Komponenten representerer et <hr>-element i HTML, som står for «horizontal rule» – HTML-elementet representerer et tematisk skille mellom avsnittsnivåelementer: for eksempel et skifte av tema.

Den skal brukes til å markere et skille mellom innhold som ikke hører logisk sammen, for eksempel ulike seksjoner i en artikkel eller ulike funksjonelle områder på en side. Bruk den for å tydeliggjøre strukturen, ikke bare for å fylle tomrom eller «pynte» siden.

Universell utforming  

  • <hr>-elementet er semantisk og kan gi nyttig informasjon og struktur for skjermlesere.
  • Bruk propen ariaHidden når streken kun er dekorativ, for eksempel for å ramme inn innhold eller skape luft, uten å markere et faktisk innholdsmessig skille.