Components - DIVIDERS

A divider is a thin, lightweight rule that groups content in lists and page layouts.

Usage

Dividers help organize page content and hierarchy into individual tiles.

Full-bleed dividers emphasize separate content areas and sections that require more distinct visual separation.Alternatives to full-bleed dividers include white space, subheaders, or inset dividers.

Items without anchors

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.

Image-based content

Image-based content in grid lists does not need dividers. Grid lists adequately separate content using white space and subheaders.

Type of dividers

Full-bleed dividers

Full-bleed dividers separate distinct content sections (e.g., biographic details from contact information) or distinct content elements (e.g., list items) in both lists and page layouts.

Full-bleed dividers can also indicate seams in material where the material will expand when content is expanded.

Inset dividers

Inset dividers separate related content, such as sections in a list of contacts or emails in a conversation.

Subheaders and dividers

When using a divider with a subheader, place the divider above the subheader to reinforce the relationship between the subheader and the content.

Specs

Dividers are 1dp thick, with an opacity of either 12% black in light themes or 12% white in dark themes. Dividers are placed along the bottom edge of the content tiles, independent of the grid.