Report
A multi-section report with a cover, body, and print-friendly breakpoint.
A long-form report (quarterly update, post-mortem, research write-up) is structured as a single Joy DOM document with section headings and body copy. This use case shows the basic shape; clone and extend.
Example
Q2 2026
Platform progress report
Summary
One paragraph overview of what happened this quarter.
Highlights
Bullet-style body paragraphs work fine; use multiple p nodes for separation.
{ "version": 1, "style": { ".page": { "display": "flex", "flexDirection": "column", "fontFamily": "\"Geist\", ui-sans-serif, system-ui, sans-serif", "gap": { "value": 32, "unit": "px" }, "padding": { "value": 64, "unit": "px" }, "maxWidth": { "value": 720, "unit": "px" } }, ".cover": { "display": "flex", "flexDirection": "column", "gap": { "value": 12, "unit": "px" }, "padding": { "value": 32, "unit": "px" }, "backgroundColor": "#0f172a" }, ".cover-eyebrow": { "display": "flex", "color": "#94a3b8", "textTransform": "uppercase", "letterSpacing": { "value": 2, "unit": "px" }, "fontSize": { "value": 12, "unit": "px" } }, "h1": { "display": "flex", "fontSize": { "value": 40, "unit": "px" }, "fontWeight": "bold", "color": "#f8fafc" }, "h2": { "display": "flex", "fontSize": { "value": 22, "unit": "px" }, "fontWeight": "bold", "color": "#0f172a" }, "p": { "display": "flex", "lineHeight": 1.6, "color": "#1e293b" }, ".section": { "display": "flex", "flexDirection": "column", "gap": { "value": 8, "unit": "px" } } }, "breakpoints": [ { "conditions": [ { "type": "type", "value": "print" } ], "nodes": {}, "style": { ".page": { "display": "flex", "padding": { "value": 32, "unit": "px" } }, ".cover": { "display": "flex", "backgroundColor": "#ffffff" }, "h1": { "display": "flex", "color": "#0f172a" }, ".cover-eyebrow": { "display": "flex", "color": "#475569" } } }, { "conditions": [ { "type": "feature", "name": "width", "operator": "<", "value": 480, "unit": "px" } ], "nodes": {}, "style": { ".page": { "display": "flex", "padding": { "value": 28, "unit": "px" }, "gap": { "value": 24, "unit": "px" } }, ".cover": { "display": "flex", "padding": { "value": 20, "unit": "px" } }, "h1": { "display": "flex", "fontSize": { "value": 28, "unit": "px" } } } } ], "layout": { "type": "div", "props": { "className": [ "page" ] }, "children": [ { "type": "div", "props": { "className": [ "cover" ] }, "children": [ { "type": "p", "props": { "className": [ "cover-eyebrow" ] }, "children": [ "Q2 2026" ] }, { "type": "h1", "children": [ "Platform progress report" ] } ] }, { "type": "div", "props": { "className": [ "section" ] }, "children": [ { "type": "h2", "children": [ "Summary" ] }, { "type": "p", "children": [ "One paragraph overview of what happened this quarter." ] } ] }, { "type": "div", "props": { "className": [ "section" ] }, "children": [ { "type": "h2", "children": [ "Highlights" ] }, { "type": "p", "children": [ "Bullet-style body paragraphs work fine; use multiple p nodes for separation." ] } ] } ] }}Extending
- Add more
.sectionblocks for additional headings. - Use
imgnodes for figures withobjectFit: "contain"for diagrams orcoverfor photos. - For a table of contents, repeat the
.sectionheading pattern at the top with anchor-style links to ids; see §4.1 Selectors.
Spec references: §5.6 Typography · §5.3 Sizing