Date picker Floating Action Button (FAB)

Divider

A divider is a thin line that groups content in lists and layouts. Dividers display a visual separator between parts of content.

Usage

Dividers are used to separate content into clear groups. They should be used in the following case:

To separate group elements when those elements cannot be separated using white space
When lists don’t have an anchoring element such as an avatar or icon, spacing alone isn’t always enough to separate tiles. In this case, full-bleed dividers can help create rhythm and separate individual tiles.
To demarcates major sections of content. Use them in conjunction with anchoring elements such as avatars.

Dividers should be used sparingly to avoid cluttering the page. Do not overuse dividers as it creates visual noise and reduces their meaning.

Color usage

Dividers are the following color: neutral

Types

The Cegid Design System includes two types of dividers. Choose the relevant type depending on the layout.

Horizontal divider

The horizontal divider is made up of a horizontal line.

Vertical divider

The vertical divider is made up of a vertical line.

Anatomy and content

A divider is made up of a thin line referred to as a border. In some cases, it can also include text.

Behaviour and interaction

Full-bleed dividers

Full-bleed dividers span the entire length of a layout. They separate content into sections, such as:

Separating list and layout elements
Indicating where an element may expand

Full-bleed dividers emphasize separate content areas and sections, but if such strong divisions are not required, consider using white space, subheaders, or inset dividers.

Inset dividers

Inset dividers separate related content, anchored by elements that align with the app bar title. They should be used with anchoring elements such as icons or avatars, and left-aligned with the app bar title.

Middle dividers

Middle dividers space related content and are centered in a layout or list. They are best for separating related content.

Dividers with subheaders

Dividers can be paired with subheaders to help define content groupings. Place dividers above subheaders to reinforce the subheader’s connection to content.

Responsiveness and density

You can adapt the width and height of a divider to fit the need and context.

Dividers help users understand how content is organized by establishing a rhythm and hierarchy on a page. But a heavy use of dividers can lead to visual noise and dilute their impact.