skip to content
  • Calendar
  • Maps

Containers

Basics

True to its name, it's a container—and a simple one at that. Its main use case is to group full-width text content on a page. They are a lower level container than sections, and they will generally be nested inside of them.

<section class="container">
	<!--...-->
</section>

Sizing

Container width is capped by default at 80rem. Below we have listed some modifiers that you can use to change the maximum width of a container.

Modifier Value
unmodified 80rem
--smaller 60rem
--larger 100rem
--full 100%