Container
...
| Containers | .container |
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 |
| 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 |
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 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 |