Container

A wrapper component for restricing the width of your main content.

Default container

The default container spans the full width of the viewport with padding on both sides.

<div class="Container">
  // Content goes here
</div>

Sizes

There are four size options ranging from widest to narrowest. Choose whichever size suits best for each situation. Multiple different sizes can be used per screen. One factor which helps decide the most appropriate size is the line length of the content it contains.

<div class="Container size1">
  // Content goes here
</div>

<div class="Container size2">
  // Content goes here
</div>

<div class="Container size3">
  // Content goes here
</div>

<div class="Container size4">
  // Content goes here
</div>

Responsive sizes

A container can adapt to the width of the viewport by specifying responsive size classes prefixed with bp1-, bp2-, bp3- or bp4-. Resize your browser window to see the Container below adapt.

<div class="Container bp1-size4 bp2-size3 bp3-size2">
  // Content goes here
</div>