Component documentation
Basics
Components
- Accordion
- Alert dialog
- Alert stack
- Alert
- Avatar
- Badge
- Blank slate
- Bordered list
- Brand
- Button toolbar
- Button
- Card banner
- Card
- Checkbox
- Citation
- Dialog
- Dropdown
- Error page
- File attachment
- File upload
- Filter pill
- Global banner
- Horizontal ruler
- Icon list
- Input group
- Input icon
- Input
- Key value list
- Link
- List
- Loader
- Multi Select
- Navbar
- Or
- Pagination
- Panel
- Popover
- Progress bar
- Radio button
- Select
- Side menu
- Status pill
- Table of content
- Table
- Tabs
- Textarea
- Toolbar
- Tooltip
- Wizard
Objects
Utilities
Spacing utility classes
You can make use of utility classes to quickly make minor style changes.
Spacers
#Available spacer classes:
| All sides | Left | Right | Top | Bottom |
|---|---|---|---|---|
.u-spacer
|
.u-spacer-left
|
.u-spacer-right
|
.u-spacer-top
|
.u-spacer-bottom
|
.u-spacer-s
|
.u-spacer-left-s
|
.u-spacer-right-s
|
.u-spacer-top-s
|
.u-spacer-bottom-s
|
.u-spacer-l
|
.u-spacer-left-l
|
.u-spacer-right-l
|
.u-spacer-top-l
|
.u-spacer-bottom-l
|
.u-spacer-xl
|
.u-spacer-left-xl
|
.u-spacer-right-xl
|
.u-spacer-top-xl
|
.u-spacer-bottom-xl
|
Spacers
#Available spacer classes:
-
.u-spacer -
.u-spacer-xl -
.u-spacer-l -
.u-spacer-s -
.u-spacer-left -
.u-spacer-left-l -
.u-spacer-left-xl -
.u-spacer-left-s -
.u-spacer-right -
.u-spacer-right-xl -
.u-spacer-right-l -
.u-spacer-right-s -
.u-spacer-top -
.u-spacer-top-xl -
.u-spacer-top-l -
.u-spacer-top-s -
.u-spacer-bottom -
.u-spacer-bottom-xl -
.u-spacer-bottom-l -
.u-spacer-bottom-s