Komponenter

Divider

Divider brukes for å skape et visuelt skille mellom innhold. Det er en enkel horisontal linje som strekker seg over tilgjengelig bredde.

Oversikt Kode Tilgjengelighet

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Preview = () => {
  return (
    <>
      <Paragraph>
        Divider er brukt for å dele opp innhold i mindre deler.
      </Paragraph>
      <Divider />
      <Paragraph>
        Den kan også brukes for å skille innhold som er relatert til hverandre.
      </Paragraph>
    </>
  );
};

render(<Preview />)

Bruk

Klassenavnet ds-divider legges direkte på <hr>-elementet. Legg på aria-hidden="true" for å unngå støy i skjermlesere.

CSS variabler og data-attributter

Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.

CSS-variabler
Navn	Verdi
--dsc-divider-border-width	var(--ds-border-width-default)
--dsc-divider-border-style	solid
--dsc-divider-border-color	var(--ds-color-neutral-border-subtle)

Ingen relevante data-attributter funnet.

React

import { Divider } from "@digdir/designsystemet-react";
<Divider />;

Rediger denne siden på github.com (åpnes i ny fane)