Skip to content

Dividers

Jump to bottom
ShannonTucker edited this page Feb 15, 2022 · 5 revisions

Dividers are used to divide content when using whitespace isn't enough.

Overview

  • Dividers come in three visibility variations depending on your design needs: regular, prominent, and muted
  • There are also two direction variations: horizontal and vertical

Horizontal dividers regular, prominent, muted states

Vertical divider states

Usage

When to use

  • When you need to divide content and using whitespace isn't enough.

When NOT to use

  • When you need to create a border around content or an object.
  • When you want to group content together.

How to use

  • Dividers can be used to separate content in a card, table and or content area.
  • Extend the length of dividers to meet your needs.

Example

Horizontal divider example

How we created this component- 4A Assessment

We added line dividers, as they did not exist in the Canada.ca Design system or the Core GC Design Library. This component can be found in the Extended GC Design Library - DECD.

Clone this wiki locally