Edit Accordion

Name

Also known as (comma separated)

Brief definition Expandable/collapsible sections.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Title", "default": "Shipping & returns" }, { "id": "variant", "type": "select", "label": "Variant", "default": "bordered", "options": [ "bordered", "flat", "boxed" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 20, "step": 1 }, { "id": "open", "type": "toggle", "label": "Open by default", "default": true } ]

Templates (JSON object keyed by format) { "html": "<details class=\"accordion accordion--{{variant}}\" style=\"--accent:{{accent}};border-radius:{{radius}}px;\"{{#if open}} open{{/if}}>\n <summary class=\"accordion__summary\">{{title}}</summary>\n <div class=\"accordion__panel\">\n <p>Everything in Standard, plus priority support, unlimited seats and early access to new specimens.</p>\n </div>\n</details>\n<style>\n.accordion { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; overflow: hidden; }\n.accordion--bordered { border: 1.5px solid #24143030; }\n.accordion--boxed { box-shadow: 0 8px 24px rgba(36,20,48,.14); }\n.accordion__summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }\n.accordion__summary::-webkit-details-marker { display: none; }\n.accordion__summary::after { content: \"+\"; color: var(--accent); font-size: 20px; }\n.accordion[open] .accordion__summary::after { content: \"–\"; }\n.accordion__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }\n.accordion__panel { padding: 0 18px 16px; font-size: 14px; color: #241430cc; }\n</style>", "tailwind": "<details{{#if open}} open{{/if}} class=\"accordion-tw accordion-tw--{{variant}} bg-[#FAF7F2] text-[#241430] font-sans overflow-hidden border-[1.5px] border-[#24143030]\" style=\"border-radius:{{radius}}px;\">\n <summary class=\"list-none cursor-pointer px-[18px] py-3.5 font-semibold flex items-center justify-between marker:hidden\">\n {{title}}\n <span aria-hidden=\"true\" style=\"color:{{accent}}\">+</span>\n </summary>\n <div class=\"px-[18px] pb-4 text-sm text-[#241430]/80\">\n <p>Everything in Standard, plus priority support, unlimited seats and early access to new specimens.</p>\n </div>\n</details>\n<style>\n.accordion-tw--boxed { box-shadow: 0 8px 24px rgba(36,20,48,.14); border: none !important; }\n.accordion-tw--flat { border: none !important; }\n</style>", "react": "import { useState } from \"react\";\n\nexport function Accordion({\n title = \"{{title}}\",\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n radius = {{radius}},\n open: initialOpen = {{open}},\n}) {\n const [open, setOpen] = useState(initialOpen);\n const wrap = {\n bordered: { border: \"1.5px solid #24143030\" },\n boxed: { boxShadow: \"0 8px 24px rgba(36,20,48,.14)\" },\n flat: {},\n }[variant] ?? {};\n return (\n <div style={{ fontFamily: \"system-ui, sans-serif\", fontSize: 16, lineHeight: 1.5, color: \"#241430\",\n background: \"#FAF7F2\", borderRadius: radius, overflow: \"hidden\", ...wrap }}>\n <button type=\"button\" onClick={() => setOpen((o) => !o)} style={{\n width: \"100%\", textAlign: \"left\", background: \"none\", border: \"none\", cursor: \"pointer\",\n padding: \"14px 18px\", fontWeight: 600, display: \"flex\", alignItems: \"center\",\n justifyContent: \"space-between\", color: \"inherit\", font: \"inherit\" }}>\n {title}\n <span aria-hidden=\"true\" style={{ color: accent }}>{open ? \"–\" : \"+\"}</span>\n </button>\n {open && (\n <div style={{ padding: \"0 18px 16px\", fontSize: 14, color: \"#241430cc\" }}>\n <p>Everything in Standard, plus priority support, unlimited seats and early access to new specimens.</p>\n </div>\n )}\n </div>\n );\n}" }