Containers

Containers are a stylized component to hold content. Containers provide the visual foundation for most views.

Default

Default container

<div class="container">
  <p>Default container</p>
</div>

Description

The default visual style for containers. Containers use $interface-white to ensure contrast from the background.

Sizes

Small container

Medium container

Large container

<div class="container container--small">
  <p>Small container</p>
</div>

<div class="container container--medium">
  <p>Medium container</p>
</div>

<div class="container container--large">
  <p>Large container</p>
</div>

Description

There are three container sizes: small, medium, and large.

Header

Header

Wrapper

<div class="container">
  <header class="container__header container__header--row">
    <h2 class="headline">Header</h2>
    <button type="button" class="btn btn--link ml-auto">Button</button>
  </header>
  <div class="wrapper wrapper--small">
    <p>Wrapper</p>
  </div>
</div>

Description

This pattern uses a header to introduce the container’s content.

Padded

Padded container

<div class="container container--padded">
  <p>Padded container</p>
</div>

Description

This pattern provides more generous space to the default pattern.

Subcontainer

Subcontainer

<div class="subcontainer">
  <p>Subcontainer</p>
</div>

Description

This pattern is useful in separating content within containers. It uses $interface-midnight--xx-light as its background color.

Well

Well Title

This is a well description.

<div class="well">
  <div class="well__icon">
    <tk-stamp icon="home" size="medium"></tk-stamp>
  </div>
  <div class="well__description">
    <h3 class="well__title">Well Title</h3>
    <p>This is a well description.
      <button type="button" class="btn--link well__link">Button</button>
    </p>
  </div>
</div>

Description

Wells are used just like subcontainers to provide a grouping of content within a container.

Do

  • Use large containers as the outermost element
  • Put smaller containers within larger containers
  • Use clear language in the header of a new container

Don't

  • Mix and match container sizes at the outermost level