Components / Layout
Group
Group defines section bounds and vertical space. Add Exhibit for section-wide artwork composition; Container limits only the inner content.
Basic structure
section.group > div.containerA section and its content boundary.
Group owns the scene and vertical space. Container owns width and side gutters. Links remain readable on a dark surface.
HTML
<section class="group is-tinted is-info"><div class="container"><div class="content"><h2 class="like-h3">A section and its content boundary.</h2><p>Group owns the scene and vertical space. Container owns width and side gutters. <a href="#options">Links remain readable</a> on a dark surface.</p><p class="meta">Supporting text uses the section's muted ink.</p></div></div></section>Options
| Class or attribute | What it does |
|---|---|
group | 1440px maximum; 100px top/bottom padding. |
container | 1200px content plus 15px side gutters; no spacing between children. Use Block or Stack explicitly. |
is-tinted + is-primary/info/success/warning/danger | Local color family; existing surfaces inherit it. |
is-dark | Opt-in dark background, defaulting to #202a35 independently of the body ink token. Override dark-background and companion tokens for a site. |
is-rounded | Round the section surface using the shared radius. Exhibits clip artwork to those corners. |
is-rounded-top / is-rounded-bottom | Use the same radius on only the top or bottom corners. Choose one corner treatment per Group. |