Usage
Divider draws a horizontal or vertical line to separate sections of content or groups of items. It takes no content — place it between the things you want to divide.
import "@nordhealth/components/lib/Divider"
Examples
Horizontal
A horizontal divider (the default) separates stacked content.
Vertical
Set direction="vertical" to separate items laid out in a row.
Color
Override --n-divider-color to change the line color.
Size
Override --n-divider-size to change the line thickness.
Inside a card
Use a divider to separate sections within a Card, such as a header from its body.
RTL
Dividers follow the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Divider applies
role="separator"automatically, exposing it to assistive technology as a section break. - The
aria-orientationattribute is kept in sync with thedirectionattribute, so a vertical divider is announced as a vertical separator. - Divider is decorative structure, not a focus target — it is not keyboard focusable and carries no interactive behaviour.
API reference
Divider
Divider components are used to separate and distinguish sections of content or groups of menu items. Visually, they look like horizontal or vertical lines.
<nord-divider></nord-divider>Props
| 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 |
Design guidelinesFor designers
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
separatorwhich 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
horizontalwhich can be changed using thedirectionproperty. - For more details, please see ARIA: separator role on MDN.