proof evidence trust metrics logos testimonials proof evidence trust metrics logos testimonials presentation-style proof-wall section evidence cascade for storytelling products
Evidence Cascade
Fetch pattern JSON:
curl https://webspire.de/patterns/proof-wall/evidence-cascade.json evidence-cascade.html
<section class="ws-proof-wall bg-[var(--ws-proof-wall-bg)] px-6 py-20"><div class="mx-auto max-w-7xl"><div class="grid gap-8 lg:grid-cols-[minmax(0,0.9fr)_minmax(22rem,1.1fr)] lg:items-end"><div><p class="text-sm uppercase tracking-[0.22em] text-slate-500">Proof Wall</p><h2 class="mt-4 text-4xl font-semibold tracking-[-0.03em] text-slate-950">Let evidence arrive in layers, not as one overcrowded trust section.</h2></div><p class="max-w-xl text-base leading-8 text-slate-600">Metrics, logos, quotes, and screenshots should reinforce each other. This pattern stages them in a cascade so the page feels argued, not decorated.</p></div><div class="mt-12 grid gap-4 md:grid-cols-2 xl:grid-cols-4"><article class="rounded-[1.5rem] bg-[var(--ws-proof-wall-card-dark-bg)] p-6 text-white xl:row-span-2"><p class="text-xs uppercase tracking-[0.18em] text-white/45">Signal</p><p class="mt-6 text-6xl font-semibold">92%</p><p class="mt-3 max-w-xs text-sm leading-7 text-white/70">of pilot teams moved from outline to first review inside one working session.</p></article><article class="rounded-[1.5rem] border border-slate-200 p-6"><p class="text-xs uppercase tracking-[0.18em] text-slate-400">Logo set</p><div class="mt-6 grid grid-cols-2 gap-3 text-sm font-medium text-slate-600"><span class="rounded-xl bg-slate-100 px-4 py-3">Northstar</span><span class="rounded-xl bg-slate-100 px-4 py-3">Pioneer</span><span class="rounded-xl bg-slate-100 px-4 py-3">Summit</span><span class="rounded-xl bg-slate-100 px-4 py-3">Index</span></div></article><article class="rounded-[1.5rem] border border-slate-200 p-6 xl:col-span-2"><p class="text-xs uppercase tracking-[0.18em] text-slate-400">Commentary</p><blockquote class="mt-6 max-w-2xl text-2xl font-medium leading-10 text-slate-900">We stopped sending slide drafts. We started sending narratives that already felt resolved.</blockquote></article><article class="rounded-[1.5rem] border border-slate-200 p-6 md:col-span-2 xl:col-span-3"><p class="text-xs uppercase tracking-[0.18em] text-slate-400">Supporting evidence</p><div class="mt-5 grid gap-3 md:grid-cols-3"><div class="rounded-2xl bg-slate-100 p-4"><p class="text-sm text-slate-500">Deck completion</p><p class="mt-2 text-3xl font-semibold text-slate-950">4.2x</p></div><div class="rounded-2xl bg-slate-100 p-4"><p class="text-sm text-slate-500">Review cycles</p><p class="mt-2 text-3xl font-semibold text-slate-950">-37%</p></div><div class="rounded-2xl bg-slate-100 p-4"><p class="text-sm text-slate-500">Template reuse</p><p class="mt-2 text-3xl font-semibold text-slate-950">68%</p></div></div></article></div></div></section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
proofevidencetrustmetricslogostestimonials
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section heading and framing copy. |
| content | Yes | Primary presentation-stage content. |
An evidence section for presentations and product pages that need multiple proof types without turning into a generic logo cloud.