Edit Social Proof

Name

Also known as (comma separated)

Brief definition Evidence others use and trust the product/service.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "statText", "type": "text", "label": "Stat text", "default": "Trusted by 12,000+ teams" }, { "id": "style", "type": "select", "label": "Style", "default": "logos", "options": [ "logos", "stars" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "showStat", "type": "toggle", "label": "Show stat line", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"proof proof--{{style}}\">\n {{#if showStat}}<p class=\"proof__stat\">{{statText}}</p>{{/if}}\n <div class=\"proof__logos\">\n <span>Nimbus</span><span>Fenwick</span><span>Cobalt</span>\n </div>\n <div class=\"proof__stars\" style=\"color:{{accent}};\" aria-label=\"Rated 4.9 out of 5\">&#9733;&#9733;&#9733;&#9733;&#9733; <span>4.9/5</span></div>\n</div>\n<style>\n.proof { font: 15px system-ui, sans-serif; color: #241430; padding: 20px; text-align: center; }\n.proof__stat { margin: 0 0 14px; font-weight: 700; font-size: 14px; color: #241430aa; }\n.proof__logos { display: flex; gap: 18px; justify-content: center; font-weight: 700; color: #24143066; }\n.proof--stars .proof__logos { display: none; }\n.proof__stars { display: none; margin-top: 8px; font-size: 16px; letter-spacing: 2px; }\n.proof__stars span { font-size: 13px; letter-spacing: 0; color: #241430aa; margin-left: 6px; }\n.proof--stars .proof__stars { display: block; }\n</style>", "tailwind": "<div class=\"proof-tw proof-tw--{{style}} font-sans text-[15px] text-[#241430] p-5 text-center\">\n {{#if showStat}}<p class=\"m-0 mb-3.5 font-bold text-sm text-[#241430]/65\">{{statText}}</p>{{/if}}\n <div class=\"proof-tw__logos flex gap-4.5 justify-center font-bold text-[#241430]/40\">\n <span>Nimbus</span><span>Fenwick</span><span>Cobalt</span>\n </div>\n <div class=\"proof-tw__stars hidden mt-2 text-base tracking-widest\" style=\"color:{{accent}};\" aria-label=\"Rated 4.9 out of 5\">&#9733;&#9733;&#9733;&#9733;&#9733; <span class=\"text-[13px] tracking-normal text-[#241430]/65 ml-1.5\">4.9/5</span></div>\n</div>\n<style>\n.proof-tw--stars .proof-tw__logos { display: none; }\n.proof-tw--stars .proof-tw__stars { display: block; }\n</style>", "react": "export function SocialProof({\n statText = \"{{statText}}\",\n style = \"{{style}}\",\n accent = \"{{accent}}\",\n showStat = {{showStat}},\n}) {\n const stars = style === \"stars\";\n return (\n <div style={{ font: \"15px system-ui, sans-serif\", color: \"#241430\", padding: 20, textAlign: \"center\" }}>\n {showStat && <p style={{ margin: \"0 0 14px\", fontWeight: 700, fontSize: 14, color: \"#241430aa\" }}>{statText}</p>}\n {!stars && (\n <div style={{ display: \"flex\", gap: 18, justifyContent: \"center\", fontWeight: 700, color: \"#24143066\" }}>\n <span>Nimbus</span><span>Fenwick</span><span>Cobalt</span>\n </div>\n )}\n {stars && (\n <div aria-label=\"Rated 4.9 out of 5\" style={{ marginTop: 8, fontSize: 16, letterSpacing: 2, color: accent }}>\n &#9733;&#9733;&#9733;&#9733;&#9733; <span style={{ fontSize: 13, letterSpacing: 0, color: \"#241430aa\", marginLeft: 6 }}>4.9/5</span>\n </div>\n )}\n </div>\n );\n}" }