Layout
Containers
Containers hold a comfortable measure of content and give sections a clear edge. They scale down gracefully and never force horizontal scrolling.
Examples
Use the default container for page-level content, the narrow variant for prose, and the plain variant when you only need the layout constraints.
Default container
A focused place for the important thing
Containers centre content, cap its width and add the surfaces, borders and shadows that make a section feel deliberate.
Narrow container
Keep the measure readable
A narrow container is ideal for long-form copy. The shorter line length keeps readers moving without losing their place.
Plain container
The plain variant keeps the width and padding but removes the surface, border and shadow.
Usage
Containers are responsive by default. They take the full available width until they reach their maximum, then centre themselves.
Markup
<section class="sg-container">
<p class="sg-eyebrow">Section label</p>
<h2 class="sg-h2">A clear heading</h2>
<p class="sg-body">Supporting copy goes here.</p>
</section>
<section class="sg-container sg-container--narrow">
<p>Long-form reading content.</p>
</section>Tokens
Max width 1140px
Radius 0.5rem
Padding 1.5rem
Border 1px solid