Foundation

Layout

Composition recipes for grids, layers, offsets, responsive behavior, and templates.

Use layout tokens through layout primitives. Components should not invent grid templates or z-index values.
layout
DOM renderImage render
LayoutDefault
Layout tokensTemplates / layers / offsets
templatefield-rowvar(--concrete-template-field-row)
templatelayout-splitvar(--concrete-template-layout-split)
templatelayout-split-evenvar(--concrete-template-layout-split-even)
templatelayout-split-sidebarvar(--concrete-template-layout-split-sidebar)
templatepicker-buttonvar(--concrete-template-picker-button)
templatecalendar-gridvar(--concrete-template-calendar-days)
templatedistribution-rowvar(--concrete-template-distribution-row)
templateheatmap-gridvar(--concrete-template-heatmap-grid)
gridtrack-fillvar(--concrete-grid-track-fill)
gridtrack-sidebarvar(--concrete-grid-track-sidebar)
gridcolumn-fullvar(--concrete-grid-column-full)
layeroverlay-tipvar(--concrete-z-overlay-tip)
layeroverlayvar(--concrete-z-overlay)
offsetoverlay-tip-gapvar(--concrete-offset-overlay-tip-gap)
responsivequery-control-wrapvar(--concrete-query-control-flex-wrap)
utilityflex-fillvar(--concrete-flex-fill)

Playground

Foundation examples are token specimens. The route stays registry-led so every foundation can be rendered, linked, and screenshotted through the same catalog surface.

Loading playground

Rendered matrix

Every state maps to the same foundation render route through the state query param.

Default

Layout owns recipes for composition, not item-specific CSS shortcuts.
Layout tokensTemplates / layers / offsets
templatefield-rowvar(--concrete-template-field-row)
templatelayout-splitvar(--concrete-template-layout-split)
templatelayout-split-evenvar(--concrete-template-layout-split-even)
templatelayout-split-sidebarvar(--concrete-template-layout-split-sidebar)
templatepicker-buttonvar(--concrete-template-picker-button)
templatecalendar-gridvar(--concrete-template-calendar-days)
templatedistribution-rowvar(--concrete-template-distribution-row)
templateheatmap-gridvar(--concrete-template-heatmap-grid)
gridtrack-fillvar(--concrete-grid-track-fill)
gridtrack-sidebarvar(--concrete-grid-track-sidebar)
gridcolumn-fullvar(--concrete-grid-column-full)
layeroverlay-tipvar(--concrete-z-overlay-tip)
layeroverlayvar(--concrete-z-overlay)
offsetoverlay-tip-gapvar(--concrete-offset-overlay-tip-gap)
responsivequery-control-wrapvar(--concrete-query-control-flex-wrap)
utilityflex-fillvar(--concrete-flex-fill)
Render state

Templates

Templates are shared composition recipes consumed by primitives.
TemplatesGrid recipes
field-rowvar(--concrete-template-field-row)
picker-buttonvar(--concrete-template-picker-button)
calendar-gridvar(--concrete-template-calendar-days)
distribution-rowvar(--concrete-template-distribution-row)
Render state

Layers

Layers keep overlays, menus, sticky table cells, and overlay tips deterministic.
Layer policyZ-index roles
overlay-tipvar(--concrete-z-overlay-tip)
overlayvar(--concrete-z-overlay)
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription