Containers

Containers control the maximum width of content and help maintain readable, consistent layouts across screen sizes. They are always centred on the page by default.

Default container

This should be used for most layouts. The container centres the content with a max-width: 1200px and includes standard horizontal padding.

<div class="ch-container">
  ...
</div>

Wider containers are opt‑in and intended for layouts that benefit from additional horizontal space. They can also be used to control content from expanding too wide on larger screens.

Container wide

max-width: 1440px

<div class="ch-container ch-container--wide">
  ...
</div>

Container max

max-width: 1920px

<div class="ch-container ch-container--max">
  ...
</div>

Full-bleed utility class

Use ch-full-bleed to escape a ch-container and create a block of content that spans the full window width. You’ll usually add another ch-container child div to centre the content within.

Content

Full-bleed panel

Content

<div class="ch-container">
  <p>Content</p>
  <div class="ch-full-bleed ch-text--center ch-bg--ac-teal">
    <div class="ch-container">
      <p>Full-bleed-panel</p>
    </div>
  </div>
  <p>Content</p>
</div>