Configure header sections in Payload.

Themed bleed + cascade

Each row below renders a real FeaturedQuote with different gridSettings + themeSettings. Inspect for data-theme and themed-bleed class on the rendered <section>.

Control — no themeOverride, gridSize: full

Expected: data-theme absent, no themed-bleed class, ambient styling only.

[control] A wonderful serenity has taken possession of my entire soul.

Goethe

Writer

Sturm und Drang

Theme: dark, gridSize: full → cascade + bleed

Expected: data-theme="dark", themed-bleed class present, viewport-edge dark band.

[dark+full] A wonderful serenity has taken possession of my entire soul.

Goethe

Writer

Sturm und Drang

Theme: light, gridSize: full → cascade + bleed (light band)

Expected: data-theme="light", viewport-edge light band.

[light+full] A wonderful serenity has taken possession of my entire soul.

Goethe

Writer

Sturm und Drang

Theme: dark, gridSize: half → cascade only (no bleed)

Expected: data-theme="dark", no themed-bleed class. Tokens cascade to descendants but no viewport band — proves the orthogonality.

[dark+half] A wonderful serenity has taken possession of my entire soul.

Goethe

Writer

Sturm und Drang

Theme: light, gridSize: full-bleed-content → cascade + bleed

Expected: bleed-family base size still qualifies for the bleed.

[light+bleed] A wonderful serenity has taken possession of my entire soul.

Goethe

Writer

Sturm und Drang

Runtime cascade verification

Use the toggles below to flip :root and <main> themes at runtime. Both the cascading tokens AND the painted bleeds above should re-paint automatically since --theme-surface-1 resolves through the nearest themed ancestor.

Block variety via real RenderBlocks

The sequence below is dispatched through the real RenderBlocks component (same as production pages). The reducer interleaves SectionTransition spacers automatically wherever adjacent blocks change grid family (bleed ↔ col). Matching-family neighbors butt directly. Block order, in this section: RichText, CopyBlock, SectionHeading, SampleTemplate, ContentBanner (dark default), FullWidthFeature immersive → padded (different families → transition emits), MediaItem, SplitFeature, ContentBanner (themeOverride: 'light' — beats the dark default), then 3 stacked banners (same family → no transitions).

Hello world

adsum

Paulatim suggero accusator volubilis tristis benevolentia attonbitus auctus cognomen. Custodia clamo perspiciatis apud claro copiose defleo.

Aveho doloribus omnis adipiscor pectus assumenda advoco vinum vociferor. Cogo alter stella decerno animus deputo adeo verbera caute. Color eius incidunt audacia volubilis terga vigor varius. Verus alienus autus adipisci comparo creta cernuus. Consuasor cicuta illo aqua thorax aestas vos ter avarus. Tot suffragium suspendo.

urbanus quisuspendo repellendus valens
adsum usitas

Suggero accusator volubilis tristis benevolentia attonbitus auctus.

Esse custodia clamo perspiciatis apud. Copiose defleo territo aveho doloribus. Adipiscor pectus assumenda advoco vinum vociferor titulus.
animus deputo

Attonbitus auctus cognomen esse. Clamo perspiciatis apud claro copiose defleo. Aveho doloribus omnis adipiscor pectus assumenda advoco vinum vociferor. Cogo alter stella decerno animus deputo adeo verbera caute. Color eius incidunt audacia volubilis terga vigor varius.

Art Bayer
cicuta illo aqua

Somniculosus color eius incidunt audacia.

Terga vigor varius patrocinor verus alienus autus adipisci comparo creta. Tribuo consuasor cicuta illo aqua. Aestas vos ter avarus abscido tot suffragium suspendo tepidus.

Learn More
TEPIDUS DEPULSO

Cursus acies amita addo repellat comburo dolor.

Carus cunae temeritas calco aestus clam arx vetus titulus recusandae. Thymbra audentia vapulus fugit timor vel cometes amo calcar. Toties undique absconditus dolorem cur brevis.

Learn More
TEPIDUS DEPULSO

Cursus acies amita addo repellat comburo dolor.

Carus cunae temeritas calco aestus clam arx vetus titulus recusandae. Thymbra audentia vapulus fugit timor vel cometes amo calcar. Toties undique absconditus dolorem cur brevis.

Learn More
Sample backdrop (16:9)
Sample backdrop (16:9)

Somniculosus color eius incidunt audacia.

Terga vigor varius patrocinor verus alienus autus adipisci comparo creta. Tribuo consuasor cicuta illo aqua. Aestas vos ter avarus abscido tot suffragium suspendo tepidus.

Learn More

ContentBanner — themeOverride: light

Terga vigor varius patrocinor verus alienus autus adipisci comparo creta. Tribuo consuasor cicuta illo aqua. Aestas vos ter avarus abscido tot suffragium suspendo tepidus.

Learn More

Banner 1 — Short heading

A single compact sentence.

Banner 2 — A medium-length heading that wraps onto a second line at most breakpoints

Two sentences of body copy. Enough to show how the text column settles when the heading is longer than the body.

Banner 3 — A long heading that keeps going and wraps across multiple lines to stress the layout at wider viewports

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Section Transition rendering

Each scenario uses the real SectionTransition.astro component (no hand-rolled stand-in). Toggle the page themes with the buttons above to verify endpoints re-paint via the cascade.

1. Same theme both sides — solid (no visible transition)

Block A — data-theme="dark"
Block B — data-theme="dark"

2. Different themes, default (gradient)

Block A — dark
Block B — light

3. Different themes, hard-line (style="hard")

Block A — light
Block B — dark

4. Undefined endpoints — should inherit ambient from <main> / :root

Use the toggles above to verify these react to cascade changes.

Block A — no override (ambient)
Block B — no override (ambient)

5. One override, one undefined — gradient from locked to ambient

Block A — data-theme="light" (locked)
Block B — no override (ambient)

6. Mirrored: undefined from, light to

Block A — no override (ambient)
Block B — light

7. showAt = ['large', 'xlarge'] — visible only at large+

Resize the viewport to large+ to see the transition appear.

Block A — dark
Block B — light