Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.
When to use
- To separate list items or unrelated content
- To group related content
- When white space, titles, or another form of container (like Cards), are not enough to convey hierarchy
When not to use
- When white space, titles, or another form of container (like Cards), are enough to convey hierarchy
- When adding more Dividers will make the page look cluttered
Best practices
Do use white space when possible to group content before resorting to Dividers, e.g., in a Drawer or Dialog.
Do use horizontal Dividers to group related content within a section, like a navigation list.
Do use horizontal Dividers to separate large sections of related content into logical groups, like the information in a Release (Progression, Packages, Git Resources, etc).
Do use vertical Dividers to separate related content or when content in one depends on the selection in the other (e.g., a sidebar and the main content, like the Process Editor or Advanced Filters).
Don't overuse Dividers, which can make the page feel cluttered.
Don't use Dividers if the content is already visually contained, e.g., Cards.