Content
Content limits the width its content to the maximum allowed width for any given screen size, and centres it within the viewport.
Also known as:
ContentStructure
- 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
To keep in mind
Content
will match the width and alignment of theTitleBlockZen
contentContent
should be used as a wrapper for most page content below the title blockContent
should always be wrapped in aContainer
to ensure it is spaced correctlyContainer
will stretch to the edge of the viewport, and so it can be used as a container for full-width elements (backgrounds)
When to use
- Use Content as a wrapper for most page content below the title block
When not to use
- When you’re implementing the "skirt" below the title block — there’s a
specific
Skirt
component for that
On this page