Dividers

Overview

Vertical dividers are used to separate content and create a visual consistency that aids the user in understanding the message. The system currently includes 3 types of dividers - Wave, Dimple and Hairline - each of which should be used in a unique scenario.

Wave Dividers are used to break up distinct messages on a page. There should be at most 1 Wave Divider per page and images or artwork should never be used in combination with the Wave Divider. Wave dividers are the visual equivalent of paragraphs.

Dimple dividers are used to separate similar content modules within a page. These are mainly used to ‘chunk’ a complex message into multiple parts. Dimples are the visual full stops.

Hairline dividers come with or without a tapered edge and are to be used inside content modules. These separate elements of the message up to help with comprehension and recall. Hairlines are the visual commas.

Usage

See the Divider components for implementation details:

Governance

The dividers are managed by the Design Strategy team and we are currently not accepting any further contributions at this time. However If you have any ideas, improvements or any questions regarding implementation please get in touch with us.

Roadmap

  • More guidance on when to use each divider
  • More standardization around how much spacing to use around the dividers

results matching ""

    No results matching ""