Line separator
A line separator is a grey line that is used to separate different sections of content or to create visual distinction between different elements on a page.
When to use line separators
Do
- Use line separators to improve the visual hierarchy of your page and make it easier for users to navigate.
- Use line separators between sections. In most cases, a section should have a short heading (H2) to provide context.
- Consider using whitespace along with line separators to create a more visually appealing layout.
- On landing pages, do consider using a coloured section to group content.
- Avoid the “Zebra effect” where alternating coloured and white section backgrounds look like stripes.
- Reserve sections with a coloured background especially brand dark blue background for key information.
- For landing pages, the line separator should be used within a section to separate content. To add a dividing line between sections you should use the Add section > Section divider.
Don't
- Don't use too many line separators, as this can create a cluttered and confusing appearance.
- Don't use line separators in place of proper headings and subheadings, as this can make your content difficult to read and navigate.
- Don't use line separators as the sole means of separating content. Use other visual cues such as spacing and colour to differentiate different sections of content.
How to add a line separator
For both standard and landing pages, the line separator is a stand-alone component with no extra configuration required.
Standard page
Line separator
- Select the part of your page where you want to add a line separator.
- From drop down Add Line separator.
- Either Save your page to display the line separator or add a new block after the line separator.
Landing page
For landing pages, the line separator should be used within a section to separate content. To add a dividing line between sections you should use the Add section > Section divider.
1. Click + Create custom block and select Line separator from the list.
Section divider
1. Add section > Section divider