The Hero sets the tone of a page: a large title with an optional subtitle and button. Ideal at the top of a landing page.
A Hero works best as the very first thing a visitor sees, before other content competes for attention. Use it to state what the page or site is about in one sentence, backed by a single clear action — sign up, request a demo, or read further. Avoid stacking more than one Hero on a page; it loses its impact as a landmark.
A typical setup pairs a product name with a one-line value proposition and a single CTA button, as shown below. For secondary content further down the page, combine it with a CTA block, or use Typewriter in the subtitle for a dynamic headline.
Typical hero scenarios
On a webshop homepage the Hero usually pairs a seasonal or catalogue-wide message with a CTA straight into the product listing — 'Summer collection now live' with a button through to a Records-driven category page, rather than a generic welcome message. A portfolio site tends to lean on a single striking visual and a short tagline naming the discipline, since the work itself should carry the page. For professional services, the Hero often states the outcome a client gets rather than the service name — 'Get your books closed in three days', not 'Bookkeeping services' — paired with a CTA into a contact or booking form.
Mistakes to avoid
The subtitle is meant to stay short — a sentence, not a paragraph. Once it grows past two lines it starts competing with the title instead of supporting it, and the block reads more like a text block than a landmark. Avoid stacking multiple CTA buttons in a single Hero; one clear action converts better than three competing ones. Because the Hero title is usually the page's single most prominent heading, keep it as the actual page heading rather than introducing a separate, hidden top-level heading elsewhere — search engines and screen-reader users both rely on that hierarchy to understand the page.
Since the Hero renders above the fold, its background image is often the largest element the browser paints first. Keep it reasonably sized and compressed; otherwise it becomes the page's slowest-loading element and drags down load-time metrics. See SEO and structured data for how page speed and heading structure factor into search visibility.
For a headline that should feel alive rather than static, pair a rotating subtitle with a secondary call-to-action further down the page for visitors who scroll past the first one without converting.
<Hero title='Build with Obelisk' subtitle='Headless CMS' cta-href='/en/contact/' cta-label='Start' />