Skip to main content

Containers

Layout containers for common page patterns.

Spread container

Flexbox container with title on the left and actions on the right:

Example title

<div class="l-ui-spread">
  <h1>Page title</h1>
  <button class="l-ui-button l-ui-button--primary">New</button>
</div>

Grid container

Responsive grid that stacks on mobile and switches to two columns on medium screens:

First item

Grid items stack vertically on mobile.

Second item

On medium screens they sit side by side.

Third item

Additional items wrap to the next row.

Fourth item

The grid fills evenly with consistent gaps.

<div class="l-ui-grid">
  <div class="l-ui-surface">First</div>
  <div class="l-ui-surface">Second</div>
  <div class="l-ui-surface">Third</div>
  <div class="l-ui-surface">Fourth</div>
</div>

CSS classes

Container CSS classes
Class Description
l-ui-spread Flexbox with space-between alignment
l-ui-grid Responsive grid, stacked on mobile, two columns on md
l-ui-table-container Scrollable container for tables
l-ui-checkbox-container Flexbox container for checkboxes and their labels
l-ui-pagy-container Container for Pagy pagination