A Line separator is a grey line that is placed between full-width horizontal groups of related content, to create sections. This helps break up and organise a page into scannable chunks.
Line separators increase readability
Line separators are often used to improve the readability and layout of web pages, especially when dealing with large blocks of text or multiple sections of content. They make it easier to distinguish between different parts of the page.
On this 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.
Adding a Line separator on a page
Landing page
You can add a line separator on a landing page by selecting Line separator from the list of content blocks. You should always use this on a full-width section.
On landing pages, use Line separators inside/within a section to break up content blocks.
To add a dividing line between sections instead, use a Section divider by selecting Add section > Section divider.
Standard page
You can add a line separator on a standard page by selecting Add Line separator from the drop-down list of blocks.
See this live on nsw.gov.au
Visit Line separator to see how this works on a live page.
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.