Edit section

Name

Also known as (comma separated)

Brief definition Thematic section of content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Pricing" }, { "id": "body", "type": "text", "label": "Body", "default": "A thematic grouping of content, typically with its own heading." }, { "id": "accent", "type": "color", "label": "Accent", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] }, { "id": "divider", "type": "toggle", "label": "Show divider", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"sec-demo\">\n <section class=\"sec-el{{#if divider}} sec-el--divider{{/if}}\" style=\"--accent:{{accent}};\">\n <p class=\"sec-el__tag\">&lt;section&gt;</p>\n <h2 class=\"sec-el__heading\">{{heading}}</h2>\n <p class=\"sec-el__body\">{{body}}</p>\n </section>\n <section class=\"sec-el{{#if divider}} sec-el--divider{{/if}}\" style=\"--accent:{{accent}};\">\n <p class=\"sec-el__tag\">&lt;section&gt;</p>\n <h2 class=\"sec-el__heading\">Another theme</h2>\n <p class=\"sec-el__body\">Each section is its own self-contained thematic block, stacking in document order.</p>\n </section>\n</div>\n<style>\n.sec-demo { width: 360px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 8px; border-radius: 12px; }\n.sec-el { padding: 16px 14px; }\n.sec-el--divider:not(:last-child) { border-bottom: 1.5px dashed var(--accent); }\n.sec-el__tag { margin: 0 0 6px; font: 700 10px ui-monospace, monospace; color: var(--accent); text-transform: uppercase; }\n.sec-el__heading { margin: 0 0 6px; font-size: 17px; font-weight: 700; }\n.sec-el__body { margin: 0; color: #241430aa; font-size: 13px; }\n</style>", "tailwind": "<div class=\"w-[360px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-2 rounded-xl\">\n <section class=\"sec-tw{{#if divider}} sec-tw--divider{{/if}} px-3.5 py-4\" style=\"--accent:{{accent}}\">\n <p class=\"m-0 mb-1.5 font-mono text-[10px] font-bold uppercase\" style=\"color:{{accent}}\">&lt;section&gt;</p>\n <h2 class=\"m-0 mb-1.5 text-[17px] font-bold\">{{heading}}</h2>\n <p class=\"m-0 text-[#241430]/65 text-[13px]\">{{body}}</p>\n </section>\n <section class=\"sec-tw{{#if divider}} sec-tw--divider{{/if}} px-3.5 py-4\" style=\"--accent:{{accent}}\">\n <p class=\"m-0 mb-1.5 font-mono text-[10px] font-bold uppercase\" style=\"color:{{accent}}\">&lt;section&gt;</p>\n <h2 class=\"m-0 mb-1.5 text-[17px] font-bold\">Another theme</h2>\n <p class=\"m-0 text-[#241430]/65 text-[13px]\">Each section is its own self-contained thematic block, stacking in document order.</p>\n </section>\n</div>\n<style>\n.sec-tw--divider:not(:last-child) { border-bottom: 1.5px dashed var(--accent); }\n</style>", "react": "export function SectionElement({\n heading = \"{{heading}}\",\n body = \"{{body}}\",\n accent = \"{{accent}}\",\n divider = {{divider}},\n}) {\n const style = { padding: \"16px 14px\", borderBottom: divider ? `1.5px dashed ${accent}` : \"none\" };\n return (\n <div style={{ width: 360, boxSizing: \"border-box\", font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 8, borderRadius: 12 }}>\n <section style={style}>\n <p style={{ margin: \"0 0 6px\", font: \"700 10px ui-monospace, monospace\", color: accent, textTransform: \"uppercase\" }}>&lt;section&gt;</p>\n <h2 style={{ margin: \"0 0 6px\", fontSize: 17, fontWeight: 700 }}>{heading}</h2>\n <p style={{ margin: 0, color: \"#241430aa\", fontSize: 13 }}>{body}</p>\n </section>\n <section style={{ padding: \"16px 14px\" }}>\n <p style={{ margin: \"0 0 6px\", font: \"700 10px ui-monospace, monospace\", color: accent, textTransform: \"uppercase\" }}>&lt;section&gt;</p>\n <h2 style={{ margin: \"0 0 6px\", fontSize: 17, fontWeight: 700 }}>Another theme</h2>\n <p style={{ margin: 0, color: \"#241430aa\", fontSize: 13 }}>Each section is its own self-contained thematic block, stacking in document order.</p>\n </section>\n </div>\n );\n}" }