Adaptive Widget Grid

<section class="ws-widget-showcase bg-slate-100 px-6 py-20"><div class="mx-auto max-w-7xl"><div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between"><div><p class="text-sm uppercase tracking-[0.22em] text-slate-500">Widget System</p><h2 class="mt-3 text-4xl font-semibold tracking-[-0.03em] text-slate-950">Mix metrics, commentary, and visuals without breaking the story.</h2></div><p class="max-w-xl text-sm leading-7 text-slate-600">Built for pages that feel half deck, half workspace. Every card can carry a different evidence type but still read as one composed stage.</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-color-surface)] p-6 shadow-sm xl:col-span-2"><p class="text-xs uppercase tracking-[0.18em] text-slate-400">Revenue forecast</p><div class="mt-5 grid h-44 grid-cols-8 items-end gap-2"><span class="rounded-t-xl bg-sky-500/80" style="height:24%"></span><span class="rounded-t-xl bg-sky-500/80" style="height:42%"></span><span class="rounded-t-xl bg-sky-500/80" style="height:30%"></span><span class="rounded-t-xl bg-sky-500/80" style="height:51%"></span><span class="rounded-t-xl bg-sky-500/80" style="height:64%"></span><span class="rounded-t-xl bg-sky-500/80" style="height:58%"></span><span class="rounded-t-xl bg-sky-500/80" style="height:72%"></span><span class="rounded-t-xl bg-sky-500/80" style="height:88%"></span></div></article><article class="rounded-[1.5rem] bg-[var(--ws-color-surface)] p-6 text-white shadow-sm"><p class="text-xs uppercase tracking-[0.18em] text-white/45">Narrative note</p><p class="mt-5 text-2xl font-semibold">Three slides reduced to one decision-ready summary.</p><p class="mt-4 text-sm leading-7 text-white/65">This card is for distilled commentary, not raw data.</p></article><article class="rounded-[1.5rem] bg-[var(--ws-color-surface)] p-6 shadow-sm"><p class="text-xs uppercase tracking-[0.18em] text-slate-400">Live embed</p><div class="mt-5 h-44 rounded-[1.25rem] border border-dashed border-slate-300 bg-slate-50"></div></article><article class="rounded-[1.5rem] bg-[var(--ws-color-surface)] p-6 shadow-sm"><p class="text-xs uppercase tracking-[0.18em] text-slate-400">Traction</p><p class="mt-6 text-5xl font-semibold text-slate-950">38%</p><p class="mt-2 text-sm text-emerald-600">Quarter-over-quarter growth</p></article><article class="rounded-[1.5rem] bg-[var(--ws-color-surface)] p-6 shadow-sm xl:col-span-2"><p class="text-xs uppercase tracking-[0.18em] text-slate-400">Deck preview</p><div class="mt-5 grid grid-cols-3 gap-3"><div class="rounded-[1.2rem] bg-slate-100 p-3"><div class="h-24 rounded-xl bg-white"></div> <!-- ws-ok --><div class="mt-3 h-3 w-3/4 rounded-full bg-slate-300"></div><div class="mt-2 h-3 w-1/2 rounded-full bg-slate-200"></div></div><div class="rounded-[1.2rem] bg-slate-100 p-3"><div class="h-24 rounded-xl bg-white"></div> <!-- ws-ok --><div class="mt-3 h-3 w-3/4 rounded-full bg-slate-300"></div><div class="mt-2 h-3 w-1/2 rounded-full bg-slate-200"></div></div><div class="rounded-[1.2rem] bg-slate-100 p-3"><div class="h-24 rounded-xl bg-white"></div> <!-- ws-ok --><div class="mt-3 h-3 w-3/4 rounded-full bg-slate-300"></div><div class="mt-2 h-3 w-1/2 rounded-full bg-slate-200"></div></div></div></article></div></div></section>