Edit details

Name

Also known as (comma separated)

Brief definition Native expandable disclosure component.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "summaryText", "type": "text", "label": "Summary text", "default": "What's included in Studio Plus?" }, { "id": "body", "type": "text", "label": "Content", "default": "Unlimited projects, priority support, and export to every format we make." }, { "id": "accent", "type": "color", "label": "Accent", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "open", "type": "toggle", "label": "Open by default", "default": false } ]

Templates (JSON object keyed by format) { "html": "<details class=\"det\" style=\"--accent:{{accent}};\"{{#if open}} open{{/if}}>\n <summary class=\"det__summary\">{{summaryText}}</summary>\n <p class=\"det__body\">{{body}}</p>\n</details>\n<p class=\"det__hint\">No JavaScript — click the summary to toggle. The <code>open</code> attribute is what the control forces.</p>\n<style>\n.det { width: 340px; box-sizing: border-box; font: 15px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143025; border-radius: 10px; padding: 4px 18px; }\n.det__summary { list-style: none; cursor: pointer; padding: 14px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }\n.det__summary::-webkit-details-marker { display: none; }\n.det__summary::after { content: \"\"; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }\n@media (prefers-reduced-motion: no-preference) {\n.det__summary::after { transition: transform .15s; }\n}\n.det[open] .det__summary::after { transform: rotate(45deg); }\n.det__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }\n.det__body { margin: 0 0 16px; font-size: 14px; color: #241430cc; }\n.det__hint { width: 340px; box-sizing: border-box; margin: 10px 0 0; font-size: 12px; color: #241430888; }\n.det__hint code { background: #24143012; padding: 1px 5px; border-radius: 4px; }\n</style>", "tailwind": "<details class=\"w-[340px] box-border font-sans text-[15px] text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143025] rounded-[10px] px-[18px] py-1 [&_summary::-webkit-details-marker]:hidden [&>summary]:list-none\"{{#if open}} open{{/if}}>\n <summary class=\"cursor-pointer py-3.5 font-bold flex justify-between items-center\">\n {{summaryText}}\n <span aria-hidden=\"true\" class=\"w-2 h-2 border-r-2 border-b-2 -rotate-45\" style=\"border-color:{{accent}}\"></span>\n </summary>\n <p class=\"m-0 mb-4 text-sm text-[#241430]/80\">{{body}}</p>\n</details>\n<p class=\"w-[340px] box-border mt-2.5 text-xs text-[#241430]/55\">No JavaScript — click the summary to toggle. The <code class=\"bg-[#24143012] px-1.5 py-0.5 rounded\">open</code> attribute is what the control forces.</p>", "react": "import { useState } from \"react\";\n\nexport function DetailsElement({\n summaryText = \"{{summaryText}}\",\n body = \"{{body}}\",\n accent = \"{{accent}}\",\n open: initialOpen = {{open}},\n}) {\n const [open, setOpen] = useState(initialOpen);\n return (\n <div>\n <details open={open} onToggle={(e) => setOpen(e.target.open)}\n style={{ width: 340, boxSizing: \"border-box\", font: \"15px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", border: \"1.5px solid #24143025\", borderRadius: 10, padding: \"4px 18px\" }}>\n <summary style={{ cursor: \"pointer\", padding: \"14px 0\", fontWeight: 700, display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", listStyle: \"none\" }}>\n {summaryText}\n <span aria-hidden=\"true\" style={{ width: 9, height: 9, borderRight: `2px solid ${accent}`, borderBottom: `2px solid ${accent}`, transform: open ? \"rotate(45deg)\" : \"rotate(-45deg)\" }} />\n </summary>\n <p style={{ margin: \"0 0 16px\", fontSize: 14, color: \"#241430cc\" }}>{body}</p>\n </details>\n <p style={{ width: 340, marginTop: 10, fontSize: 12, color: \"#24143088\" }}>\n No JavaScript needed — click the summary to toggle. <code>open</code> is the real attribute.\n </p>\n </div>\n );\n}" }