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.


Containers .container

Flexible Header

The 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


Page Title

Containers .col-12 .content-header


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