Component reference · Garden Handbook

Each page shows the code on the left and the real rendered result on the right; on narrow screens, switch with Preview / Code. For when to use a component, see its usage page.

Link cards, source chips, and local images have no field pages. Their usage pages are linked from Components Overview.

For every component: invalid YAML, or a top-level key the component does not support, reports garden-yaml on the whole block; a misspelled fence name reports garden-name.

Component	Use it for
`card`	Summarize a paper, repository, or module in a card with metadata and numbered takeaways.
`stat`	Display 2 to 4 key numbers, units, and short captions side by side.
`compare`	Place two or three options side by side to contrast tradeoffs, or stack good and bad practices.
`timeline`	Order release milestones, incident steps, or build stages along a vertical sequence.
`chart`	Render proportional horizontal bars with a built-in expandable data table underneath.
`figure`	Pair an SVG diagram with step buttons that highlight each region and show its explanation.
`html`	Run a self-contained HTML, CSS, and JavaScript demo inside a sandboxed iframe.
`interactive`	Let readers drag sliders or switches to recalculate formulas and charts in real time.
`file`	Attach one or more files with automatic format and size badges, download links, and inline preview.
`relations`	Place 3 to 6 elements on an ellipse or around a center node and connect them with solid or dashed, one-way or two-way labeled links.
`list`	Pair line icons with short observations in a compact card, or add headings and multi-paragraph notes for divided steps.
`choice`	Present two or three option cards with an icon, headline value, and preference label, plus an optional fallback button and selection reply.