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