Components

Divider

Divider is used to create a visual separation between content. It is a simple horizontal line that spans the available width.

Overview Code Accessibility

HTML

HTMLReact

Press Enter to start editing

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 />)

Usage

The class name ds-divider is applied directly to the <hr> element. Apply aria-hidden="true" to avoid noise in screen readers.

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.

CSS Variables
Name	Value
--dsc-divider-border-width	var(--ds-border-width-default)
--dsc-divider-border-style	solid
--dsc-divider-border-color	var(--ds-color-neutral-border-subtle)

No relevant data attributes found.

React

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

Edit this page on github.com (opens in a new tab)