Edit Trust Badge

Name

Also known as (comma separated)

Brief definition Icon signalling security, accreditation or guarantee.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "type", "type": "select", "label": "Type", "default": "Secure checkout", "options": [ "Secure checkout", "Money-back guarantee", "Accredited" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showBorder", "type": "toggle", "label": "Show border", "default": true } ]

Templates (JSON object keyed by format) { "html": "<span class=\"badge{{#if showBorder}} badge--bordered{{/if}}\" data-type=\"{{type}}\" style=\"--accent:{{accent}};\">\n <span class=\"badge__icon\" aria-hidden=\"true\">\n <span data-icon=\"Secure checkout\">&#128274;</span>\n <span data-icon=\"Money-back guarantee\">&#8635;</span>\n <span data-icon=\"Accredited\">&#9878;</span>\n </span>\n {{type}}\n</span>\n<style>\n.badge { display: inline-flex; align-items: center; gap: 8px; font: 600 13px system-ui, sans-serif; color: #241430; padding: 8px 14px; border-radius: 999px; background: #FAF7F2; }\n.badge--bordered { border: 1.5px solid var(--accent); }\n.badge__icon { color: var(--accent); font-size: 15px; display: inline-flex; }\n.badge__icon span { display: none; }\n.badge[data-type=\"Secure checkout\"] .badge__icon span[data-icon=\"Secure checkout\"],\n.badge[data-type=\"Money-back guarantee\"] .badge__icon span[data-icon=\"Money-back guarantee\"],\n.badge[data-type=\"Accredited\"] .badge__icon span[data-icon=\"Accredited\"] { display: inline; }\n</style>", "tailwind": "<span class=\"badge-tw{{#if showBorder}} border-[1.5px]{{/if}} inline-flex items-center gap-2 font-sans font-semibold text-[13px] text-[#241430] px-3.5 py-2 rounded-full bg-[#FAF7F2]\" data-type=\"{{type}}\" style=\"border-color:{{accent}};\">\n <span class=\"badge-tw__icon inline-flex text-[15px]\" style=\"color:{{accent}};\" aria-hidden=\"true\">\n <span data-icon=\"Secure checkout\">&#128274;</span>\n <span data-icon=\"Money-back guarantee\">&#8635;</span>\n <span data-icon=\"Accredited\">&#9878;</span>\n </span>\n {{type}}\n</span>\n<style>\n.badge-tw__icon span { display: none; }\n[data-type=\"Secure checkout\"] .badge-tw__icon span[data-icon=\"Secure checkout\"],\n[data-type=\"Money-back guarantee\"] .badge-tw__icon span[data-icon=\"Money-back guarantee\"],\n[data-type=\"Accredited\"] .badge-tw__icon span[data-icon=\"Accredited\"] { display: inline; }\n</style>", "react": "export function TrustBadge({\n type = \"{{type}}\",\n accent = \"{{accent}}\",\n showBorder = {{showBorder}},\n}) {\n const icon = { \"Secure checkout\": \"\\ud83d\\udd12\", \"Money-back guarantee\": \"\\u21bb\", \"Accredited\": \"\\u2696\\ufe0f\" }[type] ?? \"\\ud83d\\udd12\";\n return (\n <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8, font: \"600 13px system-ui, sans-serif\",\n color: \"#241430\", padding: \"8px 14px\", borderRadius: 999, background: \"#FAF7F2\",\n border: showBorder ? `1.5px solid ${accent}` : \"none\" }}>\n <span aria-hidden=\"true\" style={{ color: accent, fontSize: 15 }}>{icon}</span>\n {type}\n </span>\n );\n}" }