Dividers
Dividers are thin lines that group content in lists or other containers. They separate content into clear groups and help users understand the layout.
Live Preview
Full-width Dividers
Inset Dividers
Dividers with Subheader
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| color | color | #CAC4D0 | #999999 (30%) | #8A8A8A (30%) |
| thickness | string | 1px | 1px | 1px |
| insetStart | string | 16px | 16px | 16px |
| insetEnd | string | 0px | 0px | 0px |
| verticalMargin | string | 0px | 0px | 0px |
| subheaderBackground | color | #E7E0EC | #FFF9EE | #FFFFFF |
| subheaderTextColor | color | #49454F | #999999 | #8A8A8A |
Divider Types
- Full-width - Separates distinct content sections, spans the entire width
- Inset - Separates related content, anchored by elements like icons
- Middle inset - Has spacing on both start and end
- With subheader - Includes a label to describe the following section
Usage Guidelines
- Use dividers sparingly to group content in clear sections
- Full-width dividers are for distinct sections of content
- Inset dividers are for separating related items within a section
- Align inset dividers with the content they separate (e.g., after icons)
- Consider using whitespace instead of dividers when possible
- Avoid placing dividers between items that have obvious visual separation