Edit Tagline

Name

Also known as (comma separated)

Brief definition Short memorable phrase summarising the offer or brand.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "text", "type": "text", "label": "Tagline text", "default": "Software that gets out of your way" }, { "id": "align", "type": "select", "label": "Alignment", "default": "left", "options": [ "left", "center" ] }, { "id": "color", "type": "color", "label": "Colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "showRule", "type": "toggle", "label": "Show accent underline", "default": true } ]

Templates (JSON object keyed by format) { "html": "<p class=\"tagline tagline--{{align}}\" style=\"color:{{color}};\">\n {{text}}\n {{#if showRule}}<span class=\"tagline__rule\" style=\"background:{{color}};\"></span>{{/if}}\n</p>\n<style>\n.tagline { font: 700 24px/1.4 system-ui, sans-serif; margin: 0; padding: 8px 0; }\n.tagline--left { text-align: left; }\n.tagline--center { text-align: center; }\n.tagline__rule { display: block; width: 56px; height: 4px; border-radius: 2px; margin-top: 10px; }\n.tagline--center .tagline__rule { margin-left: auto; margin-right: auto; }\n</style>", "tailwind": "<p class=\"tagline-tw tagline-tw--{{align}} font-sans font-bold text-2xl leading-snug m-0 py-2\" style=\"color:{{color}};\">\n {{text}}\n {{#if showRule}}<span class=\"block w-14 h-1 rounded-full mt-2.5\" style=\"background:{{color}};\"></span>{{/if}}\n</p>\n<style>\n.tagline-tw--center { text-align: center; }\n.tagline-tw--center span { margin-left: auto; margin-right: auto; }\n</style>", "react": "export function Tagline({\n text = \"{{text}}\",\n align = \"{{align}}\",\n color = \"{{color}}\",\n showRule = {{showRule}},\n}) {\n const centered = align === \"center\";\n return (\n <p style={{ font: \"700 24px/1.4 system-ui, sans-serif\", margin: 0, padding: \"8px 0\", textAlign: align, color }}>\n {text}\n {showRule && (\n <span style={{ display: \"block\", width: 56, height: 4, borderRadius: 2, marginTop: 10, background: color,\n marginLeft: centered ? \"auto\" : 0, marginRight: centered ? \"auto\" : 0 }} />\n )}\n </p>\n );\n}" }