1. Centered Stack
Heading, supporting text, and CTA in centered vertical flow.
container
stack
cluster
Best for:
- hero variants
- CTA bands
- intro sections
- newsletter signup
- announcements
2. Two Column Split
Classic text and media side-by-side layout.
container
split
stack
Best for:
- feature sections
- product explanation
- service highlights
- about sections
3. Feature Grid
Repeatable card matrix for capabilities and benefits.
container
stack
grid
Best for:
- services
- features
- benefits
- categories
4. Media Grid
Visual-first grid using image-heavy cards.
container
grid
Best for:
- galleries
- portfolio
- product grids
- blog cards
5. Hero Overlay
Foreground content on top of image/video background.
cover
container
stack
cluster
Best for:
- landing hero
- campaign splash
- hero with form
6. Card Row
Single-row card emphasis with strong horizontal rhythm.
container
stack
grid
Best for:
- pricing
- testimonials
- blog highlights
7. Alternating Split
Z-pattern progression with alternating media direction.
container
stack
split
Best for:
- product storytelling
- feature walkthroughs
8. List Layout
Vertical stack of list items with consistent spacing.
container
stack
Best for:
- FAQ
- timelines
- support lists
- directory items
9. Sidebar Layout
Main content with supporting side column.
container
split
stack
cluster
Best for:
- docs
- blog articles
- filters
- dashboard contexts
10. Full-Width Band
Viewport-wide background section with centered rail content.
container
stack
cluster
Best for:
- CTA
- stats
- announcements
- testimonial highlights
11. Step / Timeline
Sequential progression in horizontal or vertical flow.
container
stack
grid
Best for:
- process
- onboarding
- roadmap
- timeline
12. Dashboard / Data
Application-like layout with panels and data surfaces.
container
split
grid
cluster
stack
Best for:
- SaaS dashboard
- analytics
- tables
- activity feeds