Container

The container component is used to group other components together. You can customize its style with the style tool, just like any other component. If you set a large width (max, edge-to-edge, or full-bleed) on the container, you will also have the option to set a separate content width.

Containers have the following additional options:

  • Container type is an advanced feature for making full-bleed headers and footers. This setting should almost always be set to Body. You should only ever set it to Header if the following container has full-bleed height, and you want this container to be included in the full-bleed. Similarly, you should only set it to Footer if the previous container has full-bleed height, and you want this container to be included in the full-bleed.
  • Columns lets you add/remove columns and customize their sizes.
  • Gap lets you adjust the distance between columns if you have more than one.
Feedback or clarification