Every Layout Primitive Examples

This page intentionally wires each primitive into live markup so the template has concrete composition patterns.

  • Box
  • Cover
  • Frame
  • Grid
  • Imposter
  • Reel
  • Sidebar
  • Switcher

Sidebar + Switcher

Grid + Reel

Grid item A

Grid item B

Grid item C

Grid item D

Reel card 1

Reel card 2

Reel card 3

Reel card 4

Cover + Frame + Imposter

Top rail content

Site logo in a responsive frame

Bottom rail content

Layered container

The parent keeps normal document flow while the overlay centers itself in-place.

Useful for dialogs, callouts, and spotlight patterns.

Centered via Imposter

Diagnostics

Existing template test components still render in the same composition flow.