Skip to main content Skip to navigation Skip to search
Clarity Design System

Divider

A divider is a thin line that visually separates content into sections.

Usage

Use a divider to separate content to visually signify a change of topic, focus, or expected interaction. Use a divider with or without a header – place dividers in the content area or inside container components.

Image of divider used to break up groups of form inputs

Do

Use a divider between sections. The section headers are optional.

Image of divider used after every input in a form

Don't

Overuse divider by placing them between individual items

Types

There are two types of dividers: horizontal and vertical.

Horizontal

Horizontal dividers can separate content vertically. They are more commonly used.

Image showing horizontal dividers being used inside cards

Horizontal dividers in a card component separating the title, content, and actions

Image showing dividers separating navigation groups in a vertical navigation bar

Horizontal divider in a vertical nav component separating sections with headers

Vertical

Dividers can also change orientation to be vertical. Vertical dividers can separate content horizontally.

Image showing a vertical divider between header text and a clickable action in a card

A vertical divider separating a header and an action.

Image showing a vertical dividers between three content areas from left to right

Vertical headers separating 3 clusters of feature content