Dividers help structure a page and create hierarchy by visually separating or grouping content.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
|---|---|
|
1. Horizontal Divider |
Separates content horizontally. |
|
2. Vertical Divider |
Separates content vertically. |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| orientation Variant | horizontal | vertical | horizontal |
Accessibility
Within our product Dividers are primarily decorative and help visually separate content or sections. In most cases, they don’t convey additional meaning, so they should be hidden from assistive technologies.
If, however, the divider is used to indicate a meaningful separation, such as grouping related content or steps, we want to make sure it remains accessible. This should be indicated to the engineers so they can implement the component correctly.
Help and support