Skip to main content

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

Divider line with f-pad-vertical-3x option on a default theme

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 either c-divider or c-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">