Containers

Content containers can be used to align components to the grid, or display components in a particular layout. These containers can be seen in use within the page examples section in Style Guide.

Container

...
Containers .container

Header

Page Title

Containers .col-12 .content-header

Blocks

Content blocks add 30px of bottom margin to help space components (accordions, cards, tables, etc). The margin is removed on the last content block within a parent (last-child).

Containers .content-block

Flexible Header

Flexible Header can be used in various places through the product, including page headers and full screen modals.
Positioning is not included with the component. Position style should be done on a use-case basis.

Container .flex-header
Required Elements .flex-header-action
Optional Elements .flex-header-title .flex-header-tabs .flex-header-tab .flex-header-right .counter .btn-list .btn

Modal Header

Modal Header is a variant of the Flexible Header, that provides the same structure but in a light theme. It is the preferred header for fullscreen modals.
Positioning is not included with the component. Position style should be done on a use-case basis.

Container .flex-header
Required .flex-header.is-light
Required Elements .flex-header-action
Optional Elements .flex-header-title .flex-header-tabs .flex-header-tab .flex-header-right .counter .btn-list .btn