Container
<gcds-container>

Also called: wrapper, box.

A container is a basic box layout with a set width for its contents.

• GitHub
• Figma

Check out container use cases to see if they fit the problem you’re solving for.

Problems containers solves

Containers group related content in a space.

Use containers to:

• Arrange content and components in a basic vertical layout using a wrapper.
• Limit the width of content in a given space within a site or product.
• Support readability and scannability by reducing the overall length of a line of text and presenting smaller chunks of content at a time.
• Centre content on a screen or within a viewport.

Related components

Grid for a responsive, flexible column layout to position elements on a page.

Card for grouping small pieces of related information as a single unit.