DividerNew

Divider components are used to separate and distinguish sections of content or groups of menu items. Visually, they look like horizontal or vertical lines.

Open in new window

View RTL

<nord-divider></nord-divider>

<nord-divider style="--n-divider-color: var(--n-color-border-strong)"></nord-divider>

<nord-stack direction="horizontal">
  <div>Group</div>
  <nord-divider direction="vertical"></nord-divider>
  <div>Group</div>
  <nord-divider direction="vertical"></nord-divider>
  <div>Group</div>
</nord-stack>

<nord-card>
  <nord-stack>
    <div>Group</div>
    <nord-divider></nord-divider>
    <div>Group</div>
    <nord-divider></nord-divider>
    <div>Group</div>
  </nord-stack>
</nord-card>

<nord-divider style="--n-divider-size: 4px"></nord-divider>

<nord-stack>
  <div>Group</div>
  <nord-divider></nord-divider>
  <div>Group</div>
  <nord-divider></nord-divider>
  <div>Group</div>
</nord-stack>

Properties

Property	Attribute	Description	Type	Default
`direction`	`direction`	The direction of the divider.	`"vertical" \| "horizontal"`	`"horizontal"`

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-divider-color`	Controls the color of the divider, using our color tokens.	`var(--n-color-border)`
`--n-divider-size`	Controls the size, or thickness, of the divider.	`1px`

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

Use to represent thematic breaks between elements.
Use when you need to divide sections of content from each other.
Use to separate content into clear groups.
Use dividers sparingly, to create groupings or to separate items.

Don’t #

Avoid using for presentational purposes only.
Don’t use strong colors in dividers.
Don’t use dividers for replacing card components.

Additional considerations #

Divider uses a role called separator which indicates that the element is a divider that separates and distinguishes sections of content or groups of menu items. The implicit ARIA role of the native thematic break (<hr> element) is a separator.
Dividers have an implicit aria-orientation value of horizontal which can be changed using the direction property.
For more details, please see ARIA: separator role on MDN.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.