Slide Deck Templates

The presentation generator renders Markdown into a self-contained HTML viewer, a PDF, and per-slide PNGs. Each slide picks a layout via an HTML-comment directive (<!-- @type: title -->). Slide thumbnails below are auto-regenerated from the canonical showcase deck whenever you run npm run build:assets — so this page always reflects the current state of the template.

npm run pres -- previews/decks/my-deck.md -o previews/decks/my-deck --pdf --png

Title slide @type: title

Deck opening or chapter intro. One large H1, optional eyebrow (blockquote line) and subtitle (body line).

<!-- @type: title -->
> Eyebrow text
# Headline
Optional subtitle line.

View in showcase deck →

Section divider @type: section

Full-bleed terracotta divider for chapter breaks inside a longer deck. Section number above, headline below.

<!-- @type: section -->
> Teil 2
# Section name

View in showcase deck →

Content @type: content

Standard slide for bulleted lists, paragraphs, tables, and inline subheadings. The workhorse layout.

<!-- @type: content -->
## Slide heading
- Bullet one
- Bullet two
- Bullet three

### Subheading
More body text.

View in showcase deck →

Two-column @type: two-col

Side-by-side markdown columns. Split the body with ::: on its own line. Useful for comparisons, before/after, options A/B.

<!-- @type: two-col -->
## Heading

### Left

- Column A markdown

:::

### Right

- Column B markdown

View in showcase deck →

Quote @type: quote

Large pulled quote with attribution. Use for testimonials, customer voice, or pivotal statements that deserve a slide of their own.

<!-- @type: quote -->
> "Short, weighty quote text."
— Source · Attribution

View in showcase deck →

Image @type: image

Full-bleed image on a dark background with optional caption. Image paths are relative to the markdown source file.

<!-- @type: image -->
![Caption text](./path/to/image.png)

View in showcase deck →

HTML passthrough @type: html

Raw HTML escape hatch — embed components from brand/components/ (e.g. the radar chart) or any custom markup. Body is rendered as-is, no markdown processing.

<!-- @type: html -->
<h2>Custom heading</h2>
<div id="my-chart"></div>
<script>
  document.getElementById('my-chart').innerHTML = renderRadarChart([4, 3, 5, 2, 4]);
</script>

View in showcase deck →

Cards @type: cards

Auto-laid-out card grid (1–4 columns by count). Each bullet becomes a card; bold lead before an em-dash is the card title, the rest is the body. Great for steps, pillars, or feature sets.

<!-- @type: cards -->
## Heading
- **Card title** — supporting body copy
- **Second card** — its body
- **Third card** — its body

View in showcase deck →

Big number @type: big-number

One huge accent number with an eyebrow and supporting copy. For a headline metric, a milestone, or a stat that deserves the whole slide.

<!-- @type: big-number -->
> Eyebrow
# 17+
Supporting copy under the number.

View in showcase deck →

Comparison @type: comparison

Opinionated A-vs-B layout: muted left lane, terracotta-accented right lane. Same ::: separator as two-col; first H3 in each column is the lane label. For before/after or status-quo vs proposal.

<!-- @type: comparison -->
## Heading

### Today
- Status quo point

:::

### Proposed
- The better way

View in showcase deck →

Statement @type: statement

Full-bleed single statement — a big claim with an optional sub-line. Supports cream / black / terracotta backgrounds via the @bg directive. For pivotal one-liners between sections.

<!-- @type: statement -->
<!-- @bg: black -->
# The big claim.
Optional supporting sub-line.

View in showcase deck →

Closing @type: closing

End-of-deck slide that mirrors the title chrome (logo, author, QR slot, accent rule) on a terracotta background. Semantically distinct from title so it is not downgraded.

<!-- @type: closing -->
> Next step
# Ready to talk?
Call to action line.

View in showcase deck →

Source: previews/showcase/slide-types.md. Regenerate thumbnails with npm run build:assets.