Elements
A large group of related actions on a panel that's richly organized and always visible when needed.
Alerts are used to communicate errors, warnings, confirmation messages and critical information that can affect the user experience.
Avatars are used to show a representation of an individual or business in the interface.
Badges are labels which hold small amounts of information.
Cards provide a flexible and extensible content container with multiple options and variants.
Use in forms to toggle the state of something on or off.
Use in forms to toggle the state of something on or off.
CSS Styles for a file upload area.
Forms gather information from users via inputs, such as text boxes, text areas, selects, checkboxes, and radio buttons.
12 column flexbox based responsive grid system.
.c-col-12 .c-col-7 .c-col-4The header is the anchor for all products and spans all parts of the UI.
Loaders are used to indicate a transitional state where content is in the process of loading.
Media objects are used for propperly aligning and displaying an item, alongside some content.
Modals deliver content, communicate information or require interaction while allowing the user to maintain the context of a particular task.
Forms gather information from users via inputs, such as text boxes, text areas, selects, checkboxes, and radio buttons.
A switch is a control that is used to quickly switch between two possible states.
Tables are used to structure large amounts of content in a way that makes it easier for people to read and comprehend.
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Tooltips provide additional information upon hover or focus. They often contain helper text that is contextual to an element.