[Editor Demo] Layout Recipes

Wide section with dark background and custom padding

This column pairs a lead narrative with a secondary button group. Inspect the row alignment, gap, section overlay, and desktop/tablet/mobile padding values.
Image asset is not hydrated in this public lane yet (#205)

Column width 4/12

Use this column to inspect contained-width sections and equal-height card-like compositions.
This content block is unavailable right now.

Outline CTA nested in a column

Nested CTA blocks are useful for local callouts inside larger layouts.

Checklist variant inside a column

Smaller feature lists also work as nested column content.

Gap

20px row gap

Widths

4/12 desktop columns

Spacing

Per-section responsive padding

Anchor IDs

Useful for in-page jump links

Stacked testimonial in a narrow column

This column is intentionally simple so the width settings are easy to inspect.

LQ

Layout QA

Reviewer

full-bleed / right

Full-bleed section with a right-aligned banner

Inspect how section width and banner content position interact.

Open full-width page
Banner background asset is not hydrated in this public lane yet (#204)

Mini FAQ

Container width?

Full bleed.

Mobile stacking?

Disabled on this row.

This page emphasizes section, row, and column nesting so you can inspect layout composition directly in the editor.