steps process numbers agency how-it-works editorial consulting steps process numbers agency how-it-works 01-02-03 workflow process steps with large decorative numbers how we work section with big 01 02 03 numbers agency process steps with oversized numerals
Steps Big Numbers
Fetch pattern JSON:
curl https://webspire.de/patterns/steps/big-numbers.json big-numbers.html
<section class="ws-steps bg-[var(--ws-steps-bg)] py-24">
<div class="mx-auto max-w-5xl px-6">
<!-- Section heading -->
<div class="text-center">
<p class="text-sm font-semibold uppercase tracking-[0.15em] text-[var(--ws-steps-accent)]">How we work</p>
<h2 class="mt-3 text-3xl font-bold tracking-tight text-[var(--ws-steps-text)] sm:text-4xl">Three steps to the point</h2>
</div>
<!-- Steps -->
<div class="mt-20 grid gap-y-16 sm:grid-cols-3 sm:gap-x-10 sm:gap-y-0">
<!-- Step 1 -->
<div class="relative">
<!-- Connector line (hidden on last child) -->
<div class="absolute left-[calc(50%+3rem)] top-8 hidden h-px w-[calc(100%-6rem+2.5rem)] bg-[var(--ws-steps-border)] sm:block" aria-hidden="true"></div>
<div class="flex flex-col items-center text-center sm:items-start sm:text-left">
<!-- Decorative big number -->
<span class="select-none font-bold leading-none tracking-tighter text-[var(--ws-steps-number)] text-8xl sm:text-9xl" aria-hidden="true">01</span>
<h3 class="-mt-3 text-xl font-semibold text-[var(--ws-steps-text)]">Sharp focus</h3>
<p class="mt-3 text-sm leading-relaxed text-[var(--ws-steps-text-soft)]">
We start with a briefing to understand your goals, your audience, and the one thing that needs to land. No guesswork.
</p>
</div>
</div>
<!-- Step 2 -->
<div class="relative">
<div class="absolute left-[calc(50%+3rem)] top-8 hidden h-px w-[calc(100%-6rem+2.5rem)] bg-[var(--ws-steps-border)] sm:block" aria-hidden="true"></div>
<div class="flex flex-col items-center text-center sm:items-start sm:text-left">
<span class="select-none font-bold leading-none tracking-tighter text-[var(--ws-steps-number)] text-8xl sm:text-9xl" aria-hidden="true">02</span>
<h3 class="-mt-3 text-xl font-semibold text-[var(--ws-steps-text)]">Concept & presentation</h3>
<p class="mt-3 text-sm leading-relaxed text-[var(--ws-steps-text-soft)]">
We develop ideas and present them with rationale. You choose the direction — we iterate until it is right.
</p>
</div>
</div>
<!-- Step 3 -->
<div class="relative">
<div class="flex flex-col items-center text-center sm:items-start sm:text-left">
<span class="select-none font-bold leading-none tracking-tighter text-[var(--ws-steps-number)] text-8xl sm:text-9xl" aria-hidden="true">03</span>
<h3 class="-mt-3 text-xl font-semibold text-[var(--ws-steps-text)]">Targeted delivery</h3>
<p class="mt-3 text-sm leading-relaxed text-[var(--ws-steps-text-soft)]">
Final assets, copy, and campaign materials — delivered on time, on brief, and ready to use immediately.
</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
stepsprocessnumbersagencyhow-it-workseditorialconsulting
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small label above the section heading. |
| heading | Yes | Section title. |
| steps | Yes | Three (or more) step blocks each with a big number, title, and description. |
Three-column steps section where the visual weight comes from oversized muted numerals (01, 02, 03) — text-9xl, text-[var(--ws-steps-number)]. The step title sits on top with slight negative margin (-mt-3) for a stacked, editorial feel. A thin connector line spans between step columns on desktop (absolute-positioned, hidden on mobile). Stack to single column on small screens.