Simple containers

A container is any design element that exists to be populated with content. Ideally, it’s a thin shell to be filled with whatever content is necessary, applying only a border, background or similar styles. We can think of a container as a box or shell for content.

Typically, a container fills all of the space available to it horizontally and may apply internal padding. Despite this small amount of layout responsibility delegated to our containers, it’s crucial to differentiate containers from layout. Giving a container margins &mdahs; whether to space containers apart or position them within another container &mdahs; can be a source of inflexibility within a layout. Instead, containers should be spaced apart with listing, grid, or tiles patterns that can be reused with different sets of containers or directly applied to structured content without wrapping it in any container at all.

Modifiers on a container can provide independent control over its various styles. From a design perspective, the ability to create interchange borders, backgrounds, and padding can provide needed rhythm or emphasis; there’s no need to constrain a container to its initial use case.

.box--small {
  padding: 1.2rem;
}
 
.box--medium {
  padding: 2.4rem;
}
 
.box--borderGray {
  border: .1rem solid: $COLOR_GRAY_01;
}
 
.box--gray {
  background: $COLOR_GRAY_01;
}
<div class="box box--gray box--medium">
  <h2 class="text text--large text--bold ">...</h2>
  <p>...</p>
</div>

Cards and modular containers

Modular or multipart containers are most common in the form of cards — stacked containers consisting of multiple elements with visually separated regions, where content can be placed within each region. We might think of a card as having a heading, body, and footer, but there’s no need for that to be the case.

Each region of a modular container should be fully agnostic to the content within, and should additional layout be necessary within one part of a card, implementing the row pattern may be useful. A card’s heading and footer might be segments with reduced padding.

If possible, allow for variations at each level of a card. Variations in spacing, number of tiers, and background color may be useful to create visual interest out of a single object rearranged in different ways. These can imply hierarchy in typical cards, but that doesn’t need to constrain how the card pattern is used. Similarly, we should avoid imposing specific heading styles on a card. Instead, allow whatever content is necessary to be placed into the top slot, styling itself through structured content.

.card--borderGray {
  border: 0.1rem solid $COLOR_GRAY_01;
}
 
.card__segment--small {
  padding: 1.2rem 2.4rem;
}
 
.card__segment--medium {
  padding: 2.4rem;
}
 
.card__segment--gray {
  background: $COLOR_GRAY_01;
}
 
.card__segment--borderTopGray {
  border-top: 0.1rem solid $COLOR_GRAY_01;
}
<div class="card card--borderGray">
  <div class="card__segment card__segment--small card__segment--gray">
    ...
  </div>
  <div class="card__segment card__segment--medium">
    ...
  </div>
  <div class="card__segment card__segment--small card__segment--borderTopGray">
    ...
  </div>
</div>

Layout containers

Sometimes a container acts as a simple layout constraint within which other containers or content are placed. An example is the typical wrapper that sets a max-width on a website layout and centers itself with margin: 0 auto;. Identifying and creating one-off containers such as this is a key part of encapsulating layout concerns; for example, to accommodate full-width and constrained content within the body of a site.

We should take note if a layout container gets more complex than this and consider decomposing it into pieces than can be used in coordination to achieve the desired result.

.wrapper {
  margin: 0 auto;
  padding: 0 2.4rem;
  max-width: 96rem;
}
.strip {
  padding: 4.8rem 0;
  background: $COLOR_WHITE;
}
 
.strip--gray {
  background: $COLOR_GRAY_01;
}
<body>
  <div class="strip">
    <div class="wrapper">
      ...
    </div>
  </div>
  <div class="strip--gray">
    <div class="wrapper">
      ...
    </div>
  </div>
</body>