---
title: "Slide deck template – Display.dev"
description: "An HTML slide deck – scroll-snap slides, stat cards, and a one-point-per-slide structure in a single file with no dependencies. Publish it to a URL in one click, no account."
---

# Slide deck template

An HTML slide deck – scroll-snap slides, stat cards, and a one-point-per-slide structure in a single file with no dependencies. Publish it to a URL in one click, no account.

- Format: HTML
- Detail page: https://display.dev/templates/slide-deck
- Raw template file: https://display.dev/template-sources/slide-deck.html
- One-click anonymous publish (no account): POST the file to https://api.display.dev/v1/public/artifacts as multipart/form-data (`file` field)

## Agent prompt

Build a slide deck on this topic on display.dev. Fetch https://display.dev/template-sources/slide-deck.html as the starting point – scroll-snap slides, one point per slide, stat cards for numbers. Replace the sample content, keep the one-point-per-slide discipline (split a crowded slide rather than shrinking text), and keep the file self-contained (inline CSS, no scripts, no external requests).

Publish it with the display.dev MCP publish tool if connected. Otherwise POST the file to https://api.display.dev/v1/public/artifacts as multipart/form-data (`file` field, optional `name`) – no account needed. You'll get back `previewUrl` (the link to share) and `claimUrl` (one-shot link to take ownership). Reply with both.

## What this template is for

A deck that's a URL, not an attachment. Scroll-snap gives you real
slides – one screen, one point – with no framework, no build step, and
no script tag: it's CSS only, so it renders anywhere HTML renders.

The structure encodes the discipline that makes decks readable: a
three-number summary up front, a "what we deliberately did not do" slide
(the one people remember), and stat cards instead of chart screenshots.

## How teams use it

- **Quarterly reviews and readouts.** The agent drafts the deck from the
  quarter's shipped work and metrics; you cut it down to one point per
  slide.
- **Sent before the meeting.** Because it's a page, people actually read
  it in advance – and leave inline comments on the slide they disagree
  with.
- **Presented as-is.** Full-screen the browser tab; scroll advances the
  slides.

## Template source

````html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Q3 platform review – slides</title>
<style>
  :root {
    color-scheme: light dark;
    --bg: oklch(0.99 0.004 85);
    --card: oklch(1 0 0);
    --fg: oklch(0.16 0.006 85);
    --muted: oklch(0.5 0.008 85);
    --line: oklch(0.92 0.006 85);
    --accent: oklch(0.48 0.18 145);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: oklch(0.15 0.005 85);
      --card: oklch(0.19 0.006 85);
      --fg: oklch(0.97 0.004 85);
      --muted: oklch(0.65 0.008 85);
      --line: oklch(0.3 0.006 85);
      --accent: oklch(0.68 0.18 145);
    }
  }
  * { box-sizing: border-box; }
  html { scroll-snap-type: y mandatory; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.5;
  }
  .slide {
    min-height: 100vh;
    scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(2rem, 6vw, 5rem);
    border-bottom: 1px solid var(--line);
    max-width: 100%;
  }
  .slide-inner { max-width: 880px; margin: 0 auto; width: 100%; }
  .kicker { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 0.75rem; }
  h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 1rem; }
  h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 1rem; }
  p.lead { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--muted); max-width: 56ch; margin: 0; }
  ul.points { font-size: clamp(1rem, 1.8vw, 1.1875rem); padding-left: 1.25rem; margin: 0; }
  ul.points li { margin-bottom: 0.625rem; }
  ul.points li strong { font-weight: 650; }
  .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
  .stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; }
  .stat .n { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
  .stat .l { font-size: 0.8125rem; color: var(--muted); }
  .foot { position: fixed; bottom: 0.75rem; right: 1rem; font-size: 0.75rem; color: var(--muted); }
</style>
</head>
<body>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Platform team · Q3 2026</p>
    <h1>Q3 platform review</h1>
    <p class="lead">What we changed, what it cost, what it bought us.
    Scroll or press space – each slide is one point.</p>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <h2>The quarter in three numbers</h2>
    <div class="stat-row">
      <div class="stat"><div class="n">−38%</div><div class="l">p99 API latency (410 → 254 ms)</div></div>
      <div class="stat"><div class="n">−€8.4k</div><div class="l">monthly infra spend</div></div>
      <div class="stat"><div class="n">2</div><div class="l">SEV-1 incidents (was 6 in Q2)</div></div>
    </div>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <h2>What we shipped</h2>
    <ul class="points">
      <li><strong>Read-path caching</strong> in front of the three hottest queries – the p99 win.</li>
      <li><strong>Queue consolidation</strong> from four brokers to one – the spend win.</li>
      <li><strong>Migration lint + staging at scale</strong> – no lock-taking migration has reached production since.</li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <h2>What we deliberately did not do</h2>
    <ul class="points">
      <li>The multi-region read replica – demand didn't materialize; re-evaluate on the first EU-latency escalation.</li>
      <li>Service extraction of the billing module – the monolith's boundary held; the extraction stays parked.</li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <h2>Q4 plan</h2>
    <ul class="points">
      <li><strong>October:</strong> retire the legacy search index (last consumer migrates 3 Oct).</li>
      <li><strong>November:</strong> load-test the write path at 3× peak before the seasonal spike.</li>
      <li><strong>December:</strong> freeze except fixes; on-call hardening week.</li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="slide-inner">
    <p class="kicker">Questions</p>
    <h2>Comments welcome on any slide</h2>
    <p class="lead">Numbers are sample data – replace with your own.</p>
  </div>
</section>

<div class="foot">Q3 platform review · 6 slides</div>
</body>
</html>
````
