Divider

The divider separates content on the display. You use dividers most often with headers and text lists to keep list items separated and easier to read.

Divider

How to use dividers

Dividers help users understand how content is organized. When content doesn't have an anchoring element, such as an avatar or icon, spacing alone might not be enough to separate content. You can use dividers in both headers and lists

Dividers in headers

Use a divider to separate header content from layout elements. When the user scrolls, the divider appears and the content scrolls behind the divider and header.

Dividers in lists

Use dividers to separate vertical list items in situations where you want users to be able to select each item individually.

Do

horizontal divider line

Use dividers to separate vertical list items when you want users to be able to select each item individually.

Don't

horizontal divider line

Don’t use dividers in horizontal lists.

Try it out
Related developer documentation