Divider
Dividers provide subtle visual delineation between groups of content.
Also known as: horizontal rule, hr, line divider, rule, separator, separating line
<bolt-divider></bolt-divider><bolt-divider width="50%"></bolt-divider>
<bolt-divider width="200px"></bolt-divider><bolt-divider width="200px" alignment="center"></bolt-divider>
<bolt-divider width="200px" alignment="right"></bolt-divider>Elements
Permalink to "Elements"properties
Permalink to "properties"- width (optional)
- Adjusts width of divider
- Takes any CSS unit: px, %, em etc.
- alignment (optional)
- Adjusts horizontal alignment of divider
- Options:
left(default)centerright
- NOTE: Only use when applying a specific width.
General guidelines
Permalink to "General guidelines"- Dividers provide subtle visual delineation between groups of content.
- Dividers are intended to add visual separation between elements. They are not intended to meet accessibility contrast requirements and are not focusable.
- They are not interactive.
- There is no padding build into the component. Padding around the divider should be set by the designer or developer.
When to use
Permalink to "When to use"- When a visual division between content is desired.
- When space alone does not provide enough assistance with visually grouping content.
When not to use
Permalink to "When not to use"- When it is more practical to apply borders to a container than use multiple dividers.
Do
- Use to group related content together.
- Use to make content easier to digest.
Don't
- Don't make a divider interactive.
- Don't use when a border for a container would be more appropriate.
Accessibility notes
Permalink to "Accessibility notes"- Color is Contextual so it will adapt to different backgrounds to be visible.
- Component is non-interactive so it doesn’t have to meet contrast standards.
- Supposed to be a subtle visual element. Would likely be ignored by screen readers.
All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.