landing-page hero cta marketing saas hero landing intro cta above-the-fold design system hero section landing page intro with CTA
Hero Base
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/base.json base.html
<section class="ws-hero relative overflow-hidden bg-[var(--ws-hero-bg)] text-[var(--ws-hero-text)]">
<div class="mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-2 lg:items-center lg:py-28">
<div>
<p class="mb-4 inline-flex rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-[var(--ws-hero-text-soft)]">Webspire Hero</p>
<h1 class="text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">Build a sharper design system faster.</h1>
<p class="mt-5 max-w-xl text-pretty text-lg text-[var(--ws-hero-text-soft)]">Ship consistent sections with clear tokens, strict quality gates, and copy-paste patterns your team can adapt in minutes.</p>
<div class="mt-8 flex flex-wrap gap-3">
<a href="#" class="rounded-xl bg-white px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-slate-200">Start now</a> <!-- ws-ok -->
<a href="#" class="rounded-xl border border-white/20 bg-white/5 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:bg-white/10">View patterns</a>
</div>
</div>
<aside class="rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur">
<p class="text-xs uppercase tracking-[0.2em] text-[var(--ws-hero-text-muted)]">System preview</p>
<ul class="mt-4 space-y-3 text-sm text-slate-200">
<li class="flex items-center justify-between"><span>Tokens linked</span><span class="text-emerald-300">Yes</span></li>
<li class="flex items-center justify-between"><span>Responsive states</span><span class="text-emerald-300">Ready</span></li>
<li class="flex items-center justify-between"><span>A11y checks</span><span class="text-emerald-300">Passed</span></li>
</ul>
</aside>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Flagship Published
landing-pageheroctamarketingsaas
Slots
| Name | Required | Description |
|---|---|---|
| badge | No | Optional pre-heading label. |
| headline | Yes | Main value proposition. |
| body | Yes | Supporting product explanation. |
| actions | Yes | Primary and secondary CTAs. |
| media | No | Optional visual support block. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| align | 'left' | 'center' | left | Horizontal alignment of text content. |
| maxWidth | string | max-w-7xl | Container max width utility. |
Base variant for the Hero family. Use this as the default starting point before applying visual or motion-specific derivatives.