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.
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
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.
Integration
For integration guidelines, please see Web Components documentation .