Skip to main content
Version: 1.1.0

Divider

A divider is a thin line that separates content into clear groups.

View in Storybook

When to Use​

The Divider brings clarity to layout by grouping and dividing content into groups.

  • Dividers should be noticeable in a layout, but not clashing
  • Dividers should only be used if elements can't be split using white space
  • Use dividers occasionally, to create groupings rather than separate individual items
  • Dividers can be used to establish rhythm and hierarchy

Structure​

  • Medium
  • Small

Guidelines​

Dividers are subtle ways to group sections, and can only be used in the colours **UI Background/Default**, **UI Background/Light** and **UI Background/Medium**. Dividers can be used full-width where allowed by parent container, or attached to a column's width.

Implementation in Figma​

  1. In Figma go to the Assets Panel and search for divider.
  2. Drag and drop the component in your frame.
  3. Choose the variant from the Design Panel.

Do's and don'ts​

✅ Use standard dividers

❌ Do not use colours that are not approved for dividers

❌ Do not change the thickness of the divider

❌ Do not change the style of the divider