Layout

Structure your page content and create consistent layouts across a range of screen sizes by using containers and the grid system.

Responsive breakpoints

Breakpoints allow the layout to change at various screen widths to ensure all users get the best experience.

The UHB design system uses four key breakpoints that cover common device types:

Containers

Containers are used to limit the width of content and and center it within the viewport.

Fixed width

Use .uhb-o-container to create a container with a maximum width of 1280px.

<div class="uhb-o-container">
  <!-- Content -->
</div>

Full width

Use the .uhb-o-container--fluid modifier class to create a container that fills the entire width of the viewport at all sizes.

<div class="uhb-o-container uhb-o-container--fluid">
  <!-- Content -->
</div>

Grid system

The flexible 12 column grid system allows responsive layouts to be quickly created.

It is structured with a .uhb-o-grid container and .uhb-o-grid__item children which fill the entire width of the grid by default.

<div class="uhb-o-grid">
  <div class="uhb-o-grid__item">
    <div class="app-grid-item">
      12 col
    </div>
  </div>
</div>