Edit Hero Section

Name

Also known as (comma separated)

Brief definition Prominent opening section carrying the page's main message.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "headline", "type": "text", "label": "Headline", "default": "Run your whole business from one screen" }, { "id": "subheadline", "type": "text", "label": "Subheadline", "default": "Billing, support and analytics, finally in the same place." }, { "id": "ctaText", "type": "text", "label": "CTA text", "default": "Get started free" }, { "id": "align", "type": "select", "label": "Alignment", "default": "left", "options": [ "left", "center" ] }, { "id": "bg", "type": "color", "label": "Background", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<section class=\"hero hero--{{align}}\" style=\"background:{{bg}};\">\n <h1 class=\"hero__headline\">{{headline}}</h1>\n <p class=\"hero__sub\">{{subheadline}}</p>\n <button type=\"button\" class=\"hero__cta\" style=\"color:{{bg}};\">{{ctaText}}</button>\n</section>\n<style>\n.hero { font: 16px/1.5 system-ui, sans-serif; color: #FAF7F2; padding: 72px 32px; border-radius: 16px; }\n.hero--left { text-align: left; }\n.hero--center { text-align: center; }\n.hero__headline { margin: 0 0 16px; font-size: 40px; font-weight: 800; max-width: 18ch; }\n.hero--center .hero__headline { margin-left: auto; margin-right: auto; }\n.hero__sub { margin: 0 0 28px; font-size: 17px; opacity: .85; max-width: 46ch; }\n.hero--center .hero__sub { margin-left: auto; margin-right: auto; }\n.hero__cta { background: #FAF7F2; border: none; padding: 14px 30px; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }\n.hero__cta:hover, .hero__cta:focus-visible { opacity: .9; }\n</style>", "tailwind": "<section class=\"hero-tw hero-tw--{{align}} font-sans text-[#FAF7F2] px-8 py-18 rounded-2xl\" style=\"background:{{bg}};\">\n <h1 class=\"m-0 mb-4 text-4xl font-extrabold max-w-[18ch]\">{{headline}}</h1>\n <p class=\"m-0 mb-7 text-[17px] opacity-85 max-w-[46ch]\">{{subheadline}}</p>\n <button type=\"button\" class=\"bg-[#FAF7F2] border-0 px-7.5 py-3.5 rounded-xl font-bold text-[15px] cursor-pointer hover:opacity-90\" style=\"color:{{bg}};\">{{ctaText}}</button>\n</section>\n<style>\n.hero-tw--left { text-align: left; }\n.hero-tw--center { text-align: center; }\n.hero-tw--center h1, .hero-tw--center p { margin-left: auto; margin-right: auto; }\n</style>", "react": "export function HeroSection({\n headline = \"{{headline}}\",\n subheadline = \"{{subheadline}}\",\n ctaText = \"{{ctaText}}\",\n align = \"{{align}}\",\n bg = \"{{bg}}\",\n}) {\n const centered = align === \"center\";\n return (\n <section style={{ font: \"16px/1.5 system-ui, sans-serif\", color: \"#FAF7F2\", padding: \"72px 32px\",\n borderRadius: 16, textAlign: align, background: bg }}>\n <h1 style={{ margin: centered ? \"0 auto 16px\" : \"0 0 16px\", fontSize: 40, fontWeight: 800, maxWidth: \"18ch\" }}>{headline}</h1>\n <p style={{ margin: centered ? \"0 auto 28px\" : \"0 0 28px\", fontSize: 17, opacity: 0.85, maxWidth: \"46ch\" }}>{subheadline}</p>\n <button type=\"button\" style={{ background: \"#FAF7F2\", border: \"none\", padding: \"14px 30px\", borderRadius: 10,\n fontWeight: 700, fontSize: 15, cursor: \"pointer\", color: bg }}>{ctaText}</button>\n </section>\n );\n}" }