Recipe catalog
Groups of closed recipes; each opens to a complete example.
A recipe group
Document flow2 recipes
Clear a right float
Clearing right floats
The blue block clears the right float. Its text still wraps around the taller left float, whose box overlaps the blue background.
Clear both sides
Clearing both left and right floats
The blue element clears the requested side. Unequal float heights make left, right and both visibly different.
Used on the authoring handbook.
Usage and interface
DemoCatalog takes groups. Each group has id, title and entries; each entry supplies id, title, label, href and children.
The complete scenes stay server rendered inside native disclosures. Use distinct IDs when multiple catalogs share a page. Keep the first working example of a lesson directly visible.
See the complete working recipes and the layout contract.