Overview
Overview
A horizontal rule is a visual element used in web design and documents to separate or organise content. It typically appears as a horizontal line and serves as a divider between different sections, topics, or ideas. In HTML, horizontal rules are created using the <hr> element, which is a self-closing tag.
In our Design System there are 3 classes for horizontal rules, Large, Medium and Small, each of these can be used on any background colour.
Horizontal rules example
<hr class="qld__horizontal-rule" aria-hidden="true">
<hr class="qld__horizontal-rule qld__horizontal-rule--md" aria-hidden="true">
<hr class="qld__horizontal-rule qld__horizontal-rule--lg" aria-hidden="true">
Usage guidelines
When to use
- To separate different sections: Use horizontal rules when you want to visually distinguish between different sections of your content, such as separating chapters, articles, or different topics within a page. Using HR to break content into meaningful chunks, designers can improve the user experience, enhance readability, and increase the likelihood of users retaining the information (Nielsen Norman Group. n.d.).
- To create a visual break: If you have long passages of text or a dense layout, horizontal rules can provide some visual relief and give the reader a chance to pause and refocus.
- To emphasise a change in context: If the content shifts from one topic to another, using a horizontal rule can help signal the change and maintain a clear structure. Using background colours, horizontal rules, and white space can help users visually distinguish between what’s related and what isn’t (Nielsen Norman Group. n.d.).
When not to use
- As a substitute for whitespace: Overusing horizontal rules can make your design look cluttered. Instead, consider using whitespace (or padding and margins) to create separation and improve readability. Use white space when you want to create a more subtle separation between content chunks while maintaining a clean and uncluttered look. White space is suitable for separating smaller chunks of content, such as paragraphs or list items, where a horizontal rule might be too visually intrusive.
- When other elements are more appropriate: In some cases, other design elements like headings, subheadings, or borders may be more effective in creating visual hierarchy and separation.
How to use
Our horizontal rules are designed to work in conjunction with the vertical rhythm guidelines of our Design System.
The largest size is used to separate <sections> of content and matches the default size space between 2 sections of the same colour which is 64px.
The medium size is used to separate content within a section and uses the same spacing that generally appears above a <H2> element of 48px.
The small size is used to separate elements within a container or div and is based on the general spacing between components like buttons or cards which is 32px.