• Playground
Components
    • Article
    • Aspect Ratio
    • Breadcrumb
    • Container
    • Footer
    • Grid
    • Header
    • Main
    • Scroll Area
    • Section
    • Separator
    • Sidebar
    • Stack
  • Custom
Surfaces
  • SEO
  1. Playground
  2. Components
  3. Layouts

Layouts

Each structural component shapes the hierarchy, spacing, and rhythm of the page.

Article

A container for article content that spaces paragraphs and headings evenly.

Aspect Ratio

A box that keeps a fixed aspect ratio so media and embeds hold their shape as the layout resizes.

Breadcrumb

A linked path from root to current page, orienting users and shortcutting navigation up the hierarchy.

Container

A width-constrained wrapper that centers and pads content horizontally, keeping pages readable across viewport sizes.

Footer

A bottom-anchored region for brand identity, secondary navigation, legal links, and socials.

Grid

A two-dimensional layout that arranges items into columns, sized by a fixed count, a count per screen size, or a minimum width.

Header

A top-anchored region that can host brand identity, primary navigation, and calls-to-action, providing persistent wayfinding across the page.

Main

The page's main-content region marking the start of primary content for assistive tech and keyboard skip links.

Scroll Area

A constrained-size container that owns its own scrollbar, used for log viewers, navigation rails, and lists that can grow beyond their parent.

Section

A semantic wrapper with built-in padding, background variants, and Container, used to give vertical rhythm to page regions that aren't already self-wrapping blocks.

Separator

A thin line, used to visually and semantically separate content into distinct groups.

Sidebar

A collapsible side panel for primary app navigation.

Stack

A one-dimensional layout that arranges items in a row or column with consistent spacing, with a direction that can switch per screen size.