features numbered cards pillars how-it-works guarantees trust features numbered cards pillars guarantees 01-02-03 bold numbered feature cards 01 02 03 feature pillars with large numbers how it works three step cards
Features Numbered
Fetch pattern JSON:
curl https://webspire.de/patterns/features/numbered.json numbered.html
<section class="ws-features bg-[var(--ws-features-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-features-accent)]">How it works</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Three things we guarantee</h2>
<p class="mt-4 text-lg text-[var(--ws-features-text-soft)]">Built from the ground up with engineering teams in mind.</p>
</div>
<div class="mt-16 grid gap-8 sm:grid-cols-3">
<div class="relative flex flex-col rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8">
<span class="mb-6 self-start text-6xl font-black leading-none tracking-tighter text-[var(--ws-features-accent)]/20 select-none" aria-hidden="true">01</span>
<h3 class="text-xl font-bold text-[var(--ws-features-text)]">Scalable</h3>
<p class="mt-3 text-[var(--ws-features-text-soft)]">Designed to grow with your team. From 5 developers to 5,000 — the architecture holds without re-engineering your setup.</p>
<a href="#" class="mt-6 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-features-accent)] hover:underline">
Learn more
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<div class="relative flex flex-col rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8">
<span class="mb-6 self-start text-6xl font-black leading-none tracking-tighter text-[var(--ws-features-accent)]/20 select-none" aria-hidden="true">02</span>
<h3 class="text-xl font-bold text-[var(--ws-features-text)]">Reliable</h3>
<p class="mt-3 text-[var(--ws-features-text-soft)]">99.99% uptime SLA backed by automated failover, redundant infrastructure, and 24/7 incident response from a dedicated team.</p>
<a href="#" class="mt-6 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-features-accent)] hover:underline">
View status
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<div class="relative flex flex-col rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8">
<span class="mb-6 self-start text-6xl font-black leading-none tracking-tighter text-[var(--ws-features-accent)]/20 select-none" aria-hidden="true">03</span>
<h3 class="text-xl font-bold text-[var(--ws-features-text)]">Secure</h3>
<p class="mt-3 text-[var(--ws-features-text-soft)]">SOC 2 Type II, end-to-end encryption, and zero-knowledge architecture ensure your data stays yours — always.</p>
<a href="#" class="mt-6 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-features-accent)] hover:underline">
Security overview
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featuresnumberedcardspillarshow-it-worksguaranteestrust
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and eyebrow text. |
| cards | Yes | Numbered feature cards with title, description, and optional link. |
Three feature cards each anchored by an oversized number (01, 02, 03) rendered at low opacity as a decorative backdrop. Each card has a heading, description paragraph, and an optional directional link. The numbered format is widely used for “guarantees”, “how it works”, and “pillars” sections on SaaS landing pages.