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.