outline stage deck structure chapter presentation outline stage deck structure chapter presentation presentation-style deck-structure section outline plus stage for storytelling products
Outline Plus Stage
Fetch pattern JSON:
curl https://webspire.de/patterns/deck-structure/outline-plus-stage.json outline-plus-stage.html
<section class="ws-deck-structure bg-[var(--ws-color-bg)] px-6 py-20"><div class="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[20rem_minmax(0,1fr)]"><aside class="rounded-[1.5rem] bg-[var(--ws-color-surface)] p-6 shadow-sm"><p class="text-xs uppercase tracking-[0.18em] text-stone-400">Outline</p><ol class="mt-5 space-y-3"><li class="rounded-2xl bg-stone-100 px-4 py-3 text-sm font-medium text-stone-800">01 Context</li><li class="rounded-2xl bg-stone-100 px-4 py-3 text-sm font-medium text-stone-800">02 Market shift</li><li class="rounded-2xl bg-[var(--ws-color-primary)] px-4 py-3 text-sm font-medium text-white">03 Product thesis</li><li class="rounded-2xl bg-stone-100 px-4 py-3 text-sm font-medium text-stone-800">04 Evidence</li><li class="rounded-2xl bg-stone-100 px-4 py-3 text-sm font-medium text-stone-800">05 Rollout plan</li></ol></aside><div class="rounded-[1.8rem] bg-[var(--ws-color-surface)] p-5 text-white shadow-sm"><div class="rounded-[1.4rem] border border-white/10 bg-white/5 p-8"><p class="text-xs uppercase tracking-[0.18em] text-stone-400">Active stage</p><h2 class="mt-4 max-w-3xl text-4xl font-semibold tracking-[-0.03em]">The deck is easier to follow when every chapter earns its own frame.</h2><div class="mt-8 grid gap-4 md:grid-cols-3"><div class="rounded-2xl bg-white/5 p-4"><p class="text-sm text-white/55">Signal</p><p class="mt-3 text-3xl font-semibold">+24%</p></div><div class="rounded-2xl bg-white/5 p-4"><p class="text-sm text-white/55">Proof</p><p class="mt-3 text-base leading-7 text-white/75">Shift from dense slides to decision-oriented chapters.</p></div><div class="rounded-2xl bg-white/5 p-4"><p class="text-sm text-white/55">Action</p><p class="mt-3 text-base leading-7 text-white/75">Close this chapter with one explicit ask.</p></div></div></div></div></div></section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
outlinestagedeckstructurechapterpresentation
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section heading and framing copy. |
| content | Yes | Primary presentation-stage content. |
A presentation-native structure block that combines agenda, progression, and an active content stage.