Part of Components


Thin lines used to separate blocks of content.


Headers and white space separate information similar to dividers, except dividers show separation between major topics on a web page.


Dividers show a break or change in content.

Most often the meaning of the content will change after the divider.

Usage guidelines


Dividers, when added to a web page, present a subtle but noticeable change in the layout.

Background colours

Divider on a light or dark background:

  • 1 pixel
  • solid #DCDCDC

Content guidelines

  • use dividers sparingly
  • use dividers when it communicates separation more effectively than white space
Previous Checkboxes