Pattern handbook

# Composed Blocks Handbook

A reference catalogue of every reusable content block in the single-html-document skill. Each block appears once with its type label so you can map demonstration back to schema.

## How to read this handbook

Orientation

Each block is shown in isolation, labelled with its type so you can match it to the spec under `references/blocks/<name>.md`. Static blocks render their final HTML once; interactive blocks are mounted on load by the shared bootstrap.

tldr

## Scaffolding blocks

Group 1 of 4

Static-mode blocks for opening, flagging, and structuring prose. Useful in every archetype.

callout (icon: shield-alert)

faq

before-after

glossary

## Diagram blocks

Group 2 of 4

Visual structure blocks. Mostly static; flowchart adds click-reveal node details.

timeline

flowchart (interactive · click a node)

module-map

mind-map

concept-map (every edge labelled)

inline-svg

## Comparison and token blocks

Group 3 of 4

Side-by-side, design-system, and token blocks. Swatches and tabbed-code are interactive; the rest render purely from compile-time data.

side-by-side

contact-sheet

swatches (interactive · click to copy)

severity-tag

tabbed-code (interactive · arrow keys to switch)

## Interactive blocks

Group 4 of 4

Reader-driven blocks. All hydrate on load via the shared bootstrap and survive single-file packaging.

slider (drag the inputs)

toggle-deps (try toggling cdnAssets)

drag-reorder (drag cards or use space + arrows)

live-template (edit any field)

annotated-diff (severity tag references the catalogue above)

## Where to go next

After the catalogue

For the contract every block follows, see `references/blocks/_protocol.md`. For the index of all blocks, see `references/blocks/_index.md`. For the narrative companion to this handbook, open `composed-blocks-walkthrough.single.html`.