Container & section
<hc-section> gives full-width bands generous vertical padding and centers their content at 1200px. Tones: surface, ink (always dark), wash (the red hero wash) and grid (grid paper). <hc-container> centers content on its own; size="prose" narrows it to 800px.
<hc-section tone="wash" compact>
<hc-kicker>Wash</hc-kicker>
<hc-heading>Sections center their content</hc-heading>
</hc-section>
<hc-section tone="ink" compact>
<hc-kicker>Ink</hc-kicker>
<hc-heading>Always dark, in either theme</hc-heading>
</hc-section>
<hc-section tone="grid" compact>
<hc-container size="prose">
<hc-kicker>Grid</hc-kicker>
<hc-heading>Grid paper, with a prose-width container</hc-heading>
</hc-container>
</hc-section>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
hc-section tone | "default" | "surface" | "ink" | "wash" | "grid" | "default" | |
hc-section compact | boolean | Halve the vertical padding | |
hc-section bleed | boolean | Don't constrain content width | |
hc-container size | "default" | "prose" | "full" | "default" |
CSS parts
| Name | Description |
|---|---|
inner | The centered wrapper inside <hc-section> |