Divider
The divider component defines a thematic break or shift of topic within a page. It is an enhancement of the HTML <hr> element.
Example
Best practices
Use a divider component to show a sectional or continuity change in the content between two blocks of information.
The spacing above and below the divider is generally determined by the content surrounding it. For example, headings of differing importance require different spacing above them. But it is possible to apply spacing preselects for the space above and/or below the divider.
Do
- Use a divider to separate sections that may not otherwise have a clear beginning or end.
- Use a divider to separate information blocks where the context or continuity changes between the blocks.
Don’t
- Do not overuse dividers when white space or headings can clearly define new sections.
- Do not use dividers for graphic decoration.
Also known as
Horizontal rule
Rule
Divider line
Horizontal line
Accessibility
- When the divider is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA use
role="presentation"
. - When divider separates and distinguishes sections of content or groups of menuitems apply
role="separator"
.
Options
- Classes: Required. The <hr> element must be assigned a class type. Two choices are available:
c-divider
(with transparency set to 20%)c-subdivider
(with transparency set to 10%)
- Use the
f-pad-*
classes to specify specific vertical spacing to the horizontal rule. By default, no vertical spacing is set, allowing spacing to be determined by surrounding elements. These padding classes can be applied to eitherc-divider
orc-subdivider
. The table below shows the available options:
Class | Vertical padding |
---|---|
.f-pad-bottom-3x |
Provides 12px bottom-padding |
.f-pad-top-3x |
Provides 12px top-padding |
.f-pad-vertical-3x |
Provides 12px top and bottom padding |
.f-pad-bottom-6x |
Provides 24px bottom-padding |
.f-pad-top-6x |
Provides 24px top-padding |
.f-pad-vertical-6x |
Provides 24px top and bottom padding |
Development
- Schema definition: The divider schema defines the acceptable configurations, requirements, and options for each component.
Code and preview
Default Divider
<hr class="c-divider">
Subdivider
<hr class="c-subdivider">
Divider with 3x bottom padding
<hr class="c-divider f-pad-bottom-3x">
Divider with 6x bottom padding
<hr class="c-divider f-pad-bottom-6x">
Divider with 3x top padding
<hr class="c-divider f-pad-top-3x">
Divider with 6x top padding
<hr class="c-divider f-pad-top-6x">
Divider with 3x vertical padding
<hr class="c-divider f-pad-vertical-3x">
Divider with 6x vertical padding
<hr class="c-divider f-pad-vertical-6x">