Stack

structure · static (no JavaScript) · renders children. All components: component playground.

Description for the model

Vertical group of components with consistent spacing (e.g. the body of a lesson).

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "Stack",
  "props": {
    "gap": "md"
  },
  "children": [
    {
      "component": "Prose",
      "props": {
        "markdown": "Brewing is **extraction**: water dissolves flavour from the grounds.\n\n- Grind sets the surface area\n- Time and temperature set the speed"
      }
    },
    {
      "component": "Callout",
      "props": {
        "tone": "tip",
        "text": "Taste before you adjust."
      }
    }
  ]
}

Props

Prop	Type	Required	Notes
gap	"sm" | "md" | "lg"		Space between children. default "md"

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Empty: this component only groups other components.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "gap": "huge"
}

Issues:

• /gap must be one of “sm”, “md”, “lg”

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 7 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.