GitHub
Divider
A divider is a line that separates content.
Usage
Do
- Use dividers to create breaks between paragraph-level elements, sections of content, and inline text and links.
- Dividers should be visible in a layout, but not overemphasised.
- Use dividers sparingly to group or separate elements.
Don’t
- Avoid using a divider when whitespace is a better choice for separating content.
- Do not overuse dividers.
Anatomy
- Linear stroke: a line used to separate content.
Live playground
Types
- A divider can be horizontal (default) or vertical.
- A list divider separates content into horizontal and vertical areas.
Variants
Dividers vary in intensity between subtle, medium and strong.
Format
Size
Dividers are available in small, medium and large.
Linear stroke
Dividers are a solid greyscale line.
Placement
Divider can be positioned horizontally or vertically.
Content
A divider has no content itself but is an informative and semantic element to group and separate content.
Accessibility
Shell DS components are programmatically determinable with appropriate semantic markup and are designed to meet colour contrast requirements. If you’re not using Shell DS code, you will need to cover the accessibility considerations for each component in this pattern.
If the divider is integral to navigating or understanding content layout then it should meet the 3:1 ratio in accordance with WCAG guidance.
Every effort has been made to ensure that the Shell Design System follows accessibility best practice.
The Shell DS React framework incorporates keyboard operation to support the widest variety of assistive technologies and devices. For any future frameworks other than React, accessibility will need to be reviewed.
Help us to help you by contacting the Accessibility team for support and information regarding any questions relating to accessibility.
Is this page useful for you?
Your feedback helps to improve our documentation.