Skip to content

Layout & the content seam

How platform pages are placed inside a template. Every platform page (donate, services, events, campaigns, the members area) renders through a fixed set of LAYOUT INTENTS, the content SEAM. A template STYLES these intents to place content its way; it must never build a parallel content container, or platform pages drift from the template’s own sections. Enforced at publish by the conformance validator.

Class Intent Notes
.container contained The contained content column, text, forms, cards. Style it (and override –container) to set your content width and gutter. Use it in your own layout and sections too, so everything shares one column.
.full full-bleed Edge-to-edge regardless of the container it sits in, a hero image, a colour band. Restyle it freely; the default breaks out to the viewport width.

Set your content width with the --container token and style .container/.full in your assets/theme.css. Use .container in your own layout and sections too, so your chrome and every platform page share one column.

A selector other than .container / .full that sizes its width off var(--container) is refused at publish, before review, it builds its own content container from var(–container). Platform pages render inside .container, so a parallel container drifts from your sections, style .container instead (override –container for width and add your gutter there), and use .full for edge-to-edge.

/* ✗ REJECTED, a parallel content container */
.mytheme-container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
/* ✓ style the seam instead */
:root:root { --container: min(1200px, 92vw); }
.container { padding-inline: 1.5rem; }