| layout | component | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| title | Divider | |||||||||
| research-title | Divider | |||||||||
| figma-link-web | https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Library?type=design&node-id=974%3A2775&mode=design&t=jMcVWkPlFhZu3RTh-1 | |||||||||
| intro-text | Dividers are used sparingly to separate significant sections of content | |||||||||
| status | use-best-practice | |||||||||
| web | true | |||||||||
| mobile-app | false | |||||||||
| anchors |
|
{% include storybook-preview.html story="components-divider--default" %}
- To signify a change in topic, content type, or expected interaction.
- To create visual separation between chunks of content. Divider can help users distinguish between blocks of similar content at-a-glance.
- Short items in close proximity. Avoid using a divider between short, individual items that are close to one another, unless they separate navigation links. Consider using white space or headers instead to create vertical separation.
- Grouped interactive elements. Use a background color box or card to separate a chunk of interactive elements, like search controls, from a list of search results.
The Divider component creates a horizontal rule between sections of content. Use it to separate distinct groups of information when spacing or headings alone don't provide enough visual separation.
In most cases, dividers are decorative. If a divider communicates a meaningful change in topic or structure, don't hide it from assistive technology.
Not all dividers should be announced to screen readers. Most dividers are decorative when used alongside headings or within well-structured content.
Use aria-hidden="true" for decorative dividers when:
- The divider only provides visual separation
- Content structure is already clear through headings or other markup
Do not use aria-hidden="true" for semantic dividers when:
- The divider marks a significant topic change meaningful to non-visual users
- The divider is the primary indicator of a content boundary