Container
<gcds-container>

Also called: wrapper, box.

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

• GitHub
• Figma

Container anatomy

1. The container groups content together in a limited space that can hold text, images or other components. The width can be adjusted, for example, to limit the length of a line of text.
2. The optional border surrounds the container showing the width.

Design and accessibility for containers

Limit width of content

• Keep text line length below 65 characters for a comfortable, accessible reading length.
• Limit container width to stop large screens from displaying lines of text that are overly long and difficult to read.
• Avoid exceeding the maximum width of 71.25rem (1140px) wide.

Add a container size

The size property sets the size of the container. It comes in 6 sizes:

By default, the container size will be set to full which means it will take up the entire width of the parent container.