Divider
Dividers are thin lines that group content in lists and layouts, or separate blocks of content.
Also known as:
Horizontal rulesHRLinesStroke
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
Need to know
- Content dividers are used to separate content within a card, table, or any white content area.
- Canvas dividers are used on the canvas (not cards) to separate large blocks of content.
- Use dividers when whitespace is not enough of a separator.
Visuals
UI Kit
Examples
To keep in mind
Dividers separate content into clear groups. This helps people navigate the information hierarchy.
- Content dividers are used to separate content within a card, table, or any white content area.
- Canvas dividers are used on the canvas (not cards) to separate large blocks of content. For example, a canvas divider is used to define the area under the Title Block to create a single hierarchical plain at the top of the page.
- We use full-bleed dividers in lists/menus and middle dividers to group or separate content.
- They inherit the background color they sit on, hence the need for an opacity (alpha).
When to use and when not to use
When to use
- When whitespace is not enough of a separator.
- In lists, separate items to show they are individual and unrelated items when each item is long and otherwise difficult to scan.
- In layouts, when background color changes (e.g. from stone to white)