Part of Components

Dividers

Thin lines used to separate blocks of content.

Overview

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

Design

Dividers show a break or change in content.


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

Usage guidelines

Layout

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