Horizontal separator

Other names: horizontal rule, divider

The horizontal separator is a style component that uses a line to separate content into sections.

Sample

Default


Dotted


      

Usage

When and how to use it

Use the horizontal separator to divide sections of content. This breaks up long pages of text and allows visitors to process your most important message first.

How not to use it

Do not use horizontal separators to build a pseudo table.

Do not abuse horizontal separators and avoid separating content that belongs together. If a section is lengthy, consider adding headings and removing unnecessary words.

Accessibility

Standard accessibility review

Each time a new component version is published:

• Test with the axe accessibility tool
• Review with the VoiceOver or NVDA screen reader
• Ensure all actionable elements are accessible by keyboard command and tab in a logical order
• Check the component layout on a variety of screen sizes