Section compositions
Full-width sections use vertical rhythm tokens (--sermona-layout-section-y-*) and optional layout max widths. Compose headers with .sermona-kicker + .sermona-lede, then stack grids below.
Full-page image hero
A viewport-tall band with a cover background image, gradient scrim for legibility, and content anchored to the bottom by default (safe-area aware). Set the photo with --sermona-hero-image: url('…') on .sermona-hero-full.
Accessibility: If the image is decorative, use aria-hidden="true" on the section and keep meaning in the heading. If it carries meaning (e.g. featured work), expose a short description with aria-label on the section or visible caption copy. For LCP on production sites, prefer a real <img> (e.g. fetchpriority="high") plus a separate scrim layer — this primitive uses CSS background-image for simple docs/marketing HTML.
| Modifier | Effect |
|---|---|
.sermona-hero-full--center | Vertical centering of .sermona-hero-full__inner. |
.sermona-hero-full--top | Content toward the top + notch padding. |
.sermona-hero-full--short | ~72vh minimum instead of full viewport. |
.sermona-hero-full--cap | At most ~880px tall while still filling small screens. |
.sermona-hero-full--scrim-heavy / --scrim-light | Darker or lighter overlay (tweak contrast for busy photos). |
Campaign
Light,Held still
Full-page heroes use cover + scrim so display type stays readable without boxing the photo.
Demo clipped for the docs rail; drop the outer max-height for a true full viewport. Photo: Unsplash.
Hero split + media
A split hero pairs a display title with an aside (services teaser, quote, or metrics). Below, a media feature demonstrates the slide / film block with a play control.
Issue 04 · Mixed media
Poetic
Commerce
Director's cut
Gold on charcoal, always
The media frame uses slide background tokens; controls inherit accent color for focus and hover.
Two-column editorial + quote
Long-form
Short paragraphs and confident headings carry the voice. Links pick up accent gold.
Use .sermona-layout--wide when you need room for side-by-side grids without hitting the full 1200px rail.
“Sections are compositions of primitives — not one-off CSS.”
—Design systems notes