Edit Card

Name

Also known as (comma separated)

Brief definition Self-contained content/action block.

Notes **Cards:** Self-contained content block.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Title", "default": "Weekly digest" }, { "id": "body", "type": "text", "label": "Body", "default": "A short summary of what changed, written so anyone can skim it in ten seconds." }, { "id": "variant", "type": "select", "label": "Variant", "default": "elevated", "options": [ "elevated", "outlined", "flat" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 16, "min": 0, "max": 24, "step": 1 }, { "id": "footer", "type": "toggle", "label": "Show footer action", "default": true } ]

Templates (JSON object keyed by format) { "html": "<article class=\"card card--{{variant}}\" style=\"border-radius:{{radius}}px;\">\n <span class=\"card__accent\" style=\"background:{{accent}};\"></span>\n <h3 class=\"card__title\">{{title}}</h3>\n <p class=\"card__body\">{{body}}</p>\n {{#if footer}}\n <div class=\"card__footer\">\n <button class=\"card__action\" style=\"color:{{accent}};border-color:{{accent}};\" type=\"button\">View details</button>\n </div>\n {{/if}}\n</article>\n<style>\n.card { font: 16px/1.5 system-ui, sans-serif; max-width: 320px; padding: 20px; background: #FAF7F2; color: #241430; }\n.card--elevated { box-shadow: 0 8px 24px rgba(36,20,48,.16); border: 1px solid transparent; }\n.card--outlined { border: 1.5px solid {{accent}}; box-shadow: none; }\n.card--flat { border: none; box-shadow: none; }\n.card__accent { display: block; width: 40px; height: 4px; border-radius: 2px; margin-bottom: 12px; }\n.card__title { margin: 0 0 8px; font-weight: 600; font-size: 18px; }\n.card__body { margin: 0; font-size: 14px; color: #241430cc; }\n.card__footer { margin-top: 16px; }\n.card__action { background: transparent; border: 1.5px solid; padding: 8px 14px; border-radius: 8px; font: 500 14px system-ui, sans-serif; cursor: pointer; }\n.card__action:focus-visible { outline: 2px solid {{accent}}; outline-offset: 2px; }\n</style>", "tailwind": "<div class=\"card-tw card-tw--{{variant}} max-w-xs p-5 bg-[#FAF7F2] text-[#241430] font-sans shadow-lg\" style=\"border-radius:{{radius}}px;\">\n <span class=\"block w-10 h-1 rounded-full mb-3\" style=\"background:{{accent}}\"></span>\n <h3 class=\"m-0 mb-2 text-lg font-semibold\">{{title}}</h3>\n <p class=\"m-0 text-sm text-[#241430]/80\">{{body}}</p>\n {{#if footer}}\n <div class=\"mt-4\">\n <button type=\"button\" class=\"bg-transparent border-[1.5px] px-3.5 py-2 rounded-lg text-sm font-medium\" style=\"color:{{accent}};border-color:{{accent}}\">View details</button>\n </div>\n {{/if}}\n</div>\n<style>\n.card-tw--outlined { box-shadow: none !important; border: 1.5px solid {{accent}}; }\n.card-tw--flat { box-shadow: none !important; border: none; }\n</style>", "react": "export function Card({\n title = \"{{title}}\",\n body = \"{{body}}\",\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n radius = {{radius}},\n footer = {{footer}},\n}) {\n const wrap = {\n elevated: { boxShadow: \"0 8px 24px rgba(36,20,48,.16)\", border: \"1px solid transparent\" },\n outlined: { border: `1.5px solid ${accent}`, boxShadow: \"none\" },\n flat: { border: \"none\", boxShadow: \"none\" },\n }[variant] ?? {};\n return (\n <div style={{ maxWidth: 320, padding: 20, background: \"#FAF7F2\", color: \"#241430\",\n borderRadius: radius, fontFamily: \"system-ui, sans-serif\", ...wrap }}>\n <span style={{ display: \"block\", width: 40, height: 4, borderRadius: 2, background: accent, marginBottom: 12 }} />\n <h3 style={{ margin: \"0 0 8px\", fontWeight: 600, fontSize: 18 }}>{title}</h3>\n <p style={{ margin: 0, fontSize: 14, color: \"#241430cc\" }}>{body}</p>\n {footer && (\n <div style={{ marginTop: 16 }}>\n <button type=\"button\" style={{ background: \"transparent\", border: `1.5px solid ${accent}`,\n color: accent, padding: \"8px 14px\", borderRadius: 8, fontSize: 14, fontWeight: 500, cursor: \"pointer\" }}>\n View details\n </button>\n </div>\n )}\n </div>\n );\n}" }