Reference

Box layoutStable

Box applies theme-driven inset spacing, boundary, radius, and raised surface to semantic content.

Cluster layoutStable

Cluster wraps related controls or short content into intrinsic rows without viewport breakpoints.

Flow layoutStable

Apply consistent block-flow vertical rhythm between siblings without converting the container to flex formatting context.

Icon layout layoutStable

Align an inline icon or replaced image with accompanying text across font sizes and wrapped lines.

Stack layoutStable

Stack arranges authored children vertically with a theme-driven, overridable gap.

Center layoutStable

Center constrains readable content measure and centers it with a resilient inline gutter.

Grid layoutStable

Grid creates an intrinsic responsive collection whose columns fit the available container width.

Container layoutPreview

Set the page gutter and establish an inline-size query container for its contents.

Sidebar layoutPreview

Give secondary content a preferred size while the primary content takes the available space.

Switcher layoutPreview

Switcher moves peer items onto separate rows together when space is tight. Five or more peers always stack. Use Cluster for independent actions that can wrap separately.

Gallery layout patternStable

Compose one primary linked figure with a resilient set of linked supporting views without owning selection, zoom, or product state.

Media object patternStable

Pair compact media with a flexible block of content without allowing long text or replaced media to force overflow.

Page shell patternStable

Keep header, main, and footer landmarks in a resilient full-block page frame without taking ownership of navigation or application state.

Product grid patternStable

Arrange server-authored product summaries in an intrinsic collection grid while keeping every product link and commerce fact independent of layout.

Region rhythm patternStable

Apply consistent theme-driven block spacing to major authored page regions without coupling spacing to viewport breakpoints.

Split patternStable

Place two authored regions side by side when space permits and return them to logical source order in narrow containers.

Sticky sidebar patternStable

Pair supporting navigation or controls with primary content, enabling bounded sticky positioning only when the containing block is wide enough.

Bento patternPreview

Arrange independently meaningful cards in an intrinsic dense-looking grid without changing DOM order or requiring fixed viewport breakpoints.

Breakout layoutPreview

Keep paragraphs on a reading track and let a figure use a wider track. Give the caption and figure a closer relationship than the following section.

Dashboard shell patternPreview

Provide a landmark-complete application page shell whose navigation, main content, supporting region, and footer retain truthful reading order.

Anchored placement recipePreview

Place native popover content near an explicit anchor with browser collision fallback and a durable in-flow destination.

Cover layoutPreview

Keep a lead message centered between supporting content and actions.

Frame layoutPreview

Give media a defined aspect ratio. Use contain for diagrams whose full extent carries meaning.

Imposter recipePreview

Center a bounded authored surface over a containing region without removing the underlying content from its truthful source order.

Overlay layoutPreview

Layer related content in one grid cell, preserving the reading and focus order in the source.

Reel layoutPreview

Lay out a list along its inline axis so it can scroll in either writing direction.