Usage
Dividers separate content into clear groups.
Principles
Subtle
Dividers should be noticeable in a layout, but not jarring.
Secondary
Dividers should only be used if elements cannot be separated using white space.
Infrequent
Use dividers sparingly, to create groupings rather than separate items.
Types
Full-bleed dividers separate content into sections and span the entire length of a layout. Inset dividers separate related content, anchored by elements that align with...
Types
Full-bleed dividers
Full-bleed dividers separate content into sections.
Full-bleed dividers separate content into sections, such as:
- Separating list and layout elements
- Indicating where an element may expand
Inset dividers
Inset dividers separate related content, such as emails in an email thread. They should be used with anchoring elements such as icons or avatars, and...
Inset dividers separate related content, such as emails in an email thread. They should be used with anchoring elements such as icons or avatars, and left-aligned with the app bar title.
Middle dividers
Dividers can also be placed in the middle of a layout. They are best for separating related content, such prices on a receipt.
Dividers can also be placed in the middle of a layout. They are best for separating related content, such prices on a receipt.
Dividers with subheaders
Dividers can be paired with subheaders to identify grouped content. Place dividers above subheaders to reinforce the subheader’s connection to content.
Dividers can be paired with subheaders to identify grouped content. Place dividers above subheaders to reinforce the subheader’s connection to content.
Theming
Fortnightly Material Theme
This news app’s divider color has been customized using Material Theming. Fortnightly is a news app that uses Material Design components and Material Theming to...
This news app’s divider color has been customized using Material Theming.
Color
Fortnightly’s divider uses custom color
Element | Category | Attribute | Value |
---|---|---|---|
Surface | Surface | Color Opacity |
#FFFFFF 100% |
Divider | On Surface | Color Opacity |
#000000 12% |
Owl Material Theme
This educational app’s divider color has been customized using Material Theming. Owl is an educational app that provides courses for people who want to explore...
This educational app’s divider color has been customized using Material Theming.
Color
Owl’s divider uses custom color
Element | Category | Attribute | Value |
---|---|---|---|
Background | Background | Color Opacity |
#0336FF 100% |
Divider | On Background | Color Opacity |
#FFFFFF 20% |