landing-page hero cta minimal typography editorial hero minimal whitespace typography clean simple minimal hero with large headline typography-focused hero section
Hero Minimal
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/minimal.json minimal.html
<section class="ws-hero bg-[var(--ws-hero-bg)]">
<div class="mx-auto max-w-3xl px-6 py-32 text-center sm:py-40 lg:py-48">
<h1 class="text-balance text-5xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-6xl lg:text-7xl">Less noise, more clarity.</h1>
<p class="mx-auto mt-6 max-w-xl text-lg text-[var(--ws-hero-text-muted)]">One message. One action. Nothing else in the way.</p>
<div class="mt-10">
<a href="#" class="inline-block rounded-xl bg-[var(--ws-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-action-text)] transition hover:bg-[var(--ws-hero-action-bg-hover)]">Get started</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Flagship Published
landing-pageheroctaminimaltypographyeditorial
Slots
| Name | Required | Description |
|---|---|---|
| headline | Yes | Main headline — large, bold, attention-grabbing. |
| subtitle | Yes | One-line supporting statement beneath the headline. |
| actions | Yes | Single primary CTA button. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| align | 'center' | center | Content is always centered for this variant. |
| maxWidth | string | max-w-3xl | Container max width utility. |
Minimal variant of the Hero family. Focuses entirely on typography and whitespace — no images, no gradients, no decoration. Extends hero/base by stripping it down to the essentials.