Edit Value Proposition

Name

Also known as (comma separated)

Brief definition Statement of the benefit the product/service provides.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "headline", "type": "text", "label": "Benefit headline", "default": "Close deals in days, not quarters" }, { "id": "explanation", "type": "text", "label": "Explanation", "default": "Automated follow-ups mean nothing falls through the cracks." }, { "id": "align", "type": "select", "label": "Alignment", "default": "left", "options": [ "left", "center" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showIcon", "type": "toggle", "label": "Show checkmark icon", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"vprop vprop--{{align}}\">\n {{#if showIcon}}<span class=\"vprop__icon\" style=\"background:{{accent}};\" aria-hidden=\"true\">&#10003;</span>{{/if}}\n <h3 class=\"vprop__headline\">{{headline}}</h3>\n <p class=\"vprop__explanation\">{{explanation}}</p>\n</div>\n<style>\n.vprop { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 340px; }\n.vprop--center { text-align: center; margin: 0 auto; }\n.vprop__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #241430; font-weight: 700; margin-bottom: 12px; }\n.vprop__headline { margin: 0 0 8px; font-size: 20px; font-weight: 700; }\n.vprop__explanation { margin: 0; color: #241430cc; font-size: 14px; }\n</style>", "tailwind": "<div class=\"vprop-tw vprop-tw--{{align}} font-sans text-[#241430] max-w-[340px]\">\n {{#if showIcon}}<span class=\"inline-flex items-center justify-center w-8 h-8 rounded-full text-[#241430] font-bold mb-3\" style=\"background:{{accent}};\" aria-hidden=\"true\">&#10003;</span>{{/if}}\n <h3 class=\"m-0 mb-2 text-xl font-bold\">{{headline}}</h3>\n <p class=\"m-0 text-sm text-[#241430]/80\">{{explanation}}</p>\n</div>\n<style>\n.vprop-tw--center { text-align: center; margin: 0 auto; }\n</style>", "react": "export function ValueProposition({\n headline = \"{{headline}}\",\n explanation = \"{{explanation}}\",\n align = \"{{align}}\",\n accent = \"{{accent}}\",\n showIcon = {{showIcon}},\n}) {\n const centered = align === \"center\";\n return (\n <div style={{ font: \"16px/1.5 system-ui, sans-serif\", color: \"#241430\", maxWidth: 340,\n textAlign: align, margin: centered ? \"0 auto\" : 0 }}>\n {showIcon && (\n <span aria-hidden=\"true\" style={{ display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\",\n width: 32, height: 32, borderRadius: \"50%\", color: \"#241430\", fontWeight: 700, marginBottom: 12, background: accent }}>&#10003;</span>\n )}\n <h3 style={{ margin: \"0 0 8px\", fontSize: 20, fontWeight: 700 }}>{headline}</h3>\n <p style={{ margin: 0, color: \"#241430cc\", fontSize: 14 }}>{explanation}</p>\n </div>\n );\n}" }