Component library

<deck-cover>

Opening slide · XL title on dark, optional brand mark, meta block.

Attributes

Slots

Example

<deck-cover brand="rikiki · docs" speaker="Jane">
  <h1>Hello, <span class="accent">world</span>.</h1>
  <p class="sub">Sub-title or opening question.</p>
</deck-cover>

Customization tokens

--deck-cover-bg · --deck-cover-text · --deck-cover-soft · --deck-cover-muted · --deck-cover-faint · --deck-cover-border

<deck-section>

Chapter separator · number + centered title on dark. Marks a 2D-nav boundary.

Attributes

Slots

Example

<deck-section num="02">
  <h1>Anatomy</h1>
</deck-section>

Customization tokens

--deck-section-bg · --deck-section-num-color · --deck-section-title-color · --deck-section-em-color · --deck-section-rule-color

<deck-feature>

One focal block · code, table, mermaid, big stat.

Attributes

Slots

Example

<deck-feature eyebrow="Module">
  <h1 slot="title">Side effects</h1>
  <p slot="lead" class="lead">A module can act on import.</p>
  <deck-code lang="ts" hero>
    import './polyfill';
  </deck-code>
</deck-feature>

Customization tokens

--deck-eyebrow-bg · --deck-eyebrow-color · --deck-eyebrow-radius · --deck-eyebrow-padding-x · --deck-eyebrow-padding-y

<deck-split>

Two or three columns of cards.

Attributes

Slots

Example

<deck-split cols="1-1">
  <h1 slot="title">Two takes</h1>
  <deck-card slot="left" color="red">Problem</deck-card>
  <deck-card slot="right" color="green">Fix</deck-card>
</deck-split>

Customization tokens

--deck-split-gap · --deck-split-col-gap · --deck-eyebrow-bg · --deck-eyebrow-color

<deck-feature-cards>

Hero on top, two detail cards underneath.

Attributes

Slots

Example

<deck-feature-cards eyebrow="Deep dive">
  <h1 slot="title">One thing at a time</h1>
  <deck-code lang="ts" hero>function run() { return 42; }</deck-code>
  <deck-card slot="left">What changes</deck-card>
  <deck-card slot="right">What stays</deck-card>
</deck-feature-cards>

Customization tokens

--deck-feature-cards-gap · --deck-feature-cards-col-gap · --deck-feature-cards-hero-flex · --deck-feature-cards-detail-flex · --deck-eyebrow-bg · --deck-eyebrow-color

<deck-takeaway>

Centered punchline on dark · the take-home line.

Attributes

Slots

Example

<deck-takeaway kicker="The whole point">
  <deck-punch size="display">Source = output.</deck-punch>
  <p class="caption on-dark">A deck is a folder.</p>
</deck-takeaway>

Customization tokens

--deck-takeaway-bg · --deck-takeaway-display-color · --deck-takeaway-caption-color · --deck-takeaway-gap

<deck-photo>

Full-bleed image slide · slotted content sits on a dimmable overlay. Cover-style hero or mood section break.

Attributes

Slots

Example

<deck-photo src="/cover.jpg" darken="0.4" align="center">
  <h1>Mood opener</h1>
  <p class="sub">One line caption.</p>
</deck-photo>

Customization tokens

--deck-photo-overlay-color · --deck-photo-text-color · --deck-photo-text-muted · --deck-photo-content-max-width

<deck-code>

Code block with light syntax highlighting · js, ts, html, css.

Attributes

Example

<deck-code lang="ts" hero>
  const greet = (n: string) => `Hi, ${n}`;
</deck-code>

Customization tokens

--deck-code-bg · --deck-code-border · --deck-code-text · --deck-code-radius · --deck-code-padding-x · --deck-code-padding-y · --deck-code-syntax-{kw,str,num,cmt,ty,prop,fn}

<deck-md>

Markdown body · GFM, tables, lists, code, **bold**, *italic*.

Example

<deck-md>
  **Markdown** body with `inline code`, lists, and links.
</deck-md>

Customization tokens

--deck-md-pre-bg · --deck-md-pre-border · --deck-md-pre-text

<deck-callout>

Boxed note with icon · info / warn / danger / ok.

Attributes

Example

<deck-callout type="warn">
  <strong>Heads up ·</strong> this changes the public API.
</deck-callout>

Customization tokens

--deck-callout-bg · --deck-callout-border · --deck-callout-stroke · --deck-callout-radius · --deck-callout-padding-x · --deck-callout-padding-y

<deck-card>

Tinted card · yellow, orange, green, red.

Attributes

Example

<deck-card color="green">
  <h3>Tinted card</h3>
  <p>Used inside splits and grids.</p>
</deck-card>

Customization tokens

--deck-card-bg · --deck-card-border · --deck-card-text · --deck-card-title-color · --deck-card-radius · --deck-card-padding-x · --deck-card-padding-y · --deck-card-shadow · --deck-card-gap

<deck-mermaid>

Mermaid diagram · loaded on demand from CDN. The only opt-in CDN dependency.

Attributes

Example

<deck-mermaid>
  graph LR
  a --> b --> c
</deck-mermaid>

Customization tokens

--deck-mermaid-bg · --deck-mermaid-border · --deck-mermaid-padding · --deck-mermaid-radius

<deck-stat>

Big-number visual · for promises, metrics, milestones.

Attributes

Slots

Example

<deck-stat num="01" tone="orange">
  <h3 slot="claim">Open index.html</h3>
  No build, no toolchain.
</deck-stat>

Customization tokens

--deck-stat-color · --deck-stat-num-size · --deck-stat-num-weight · --deck-stat-claim-color · --deck-stat-body-color · --deck-stat-border-width · --deck-stat-padding-x · --deck-stat-padding-y · --deck-stat-gap

<deck-badge>

Status pill · bad / ok / info / warn / neutral.

Attributes

Example

<deck-badge type="ok">production-ready</deck-badge>

Customization tokens

--deck-badge-bg · --deck-badge-fg · --deck-badge-border · --deck-badge-radius · --deck-badge-padding-x · --deck-badge-padding-y

<deck-metric>

One-line metric · label + value · severity colored. Wrap several in <deck-metric-list> for the rule-divided list look.

Attributes

Example

<deck-metric-list>
  <deck-metric value="5"  severity="bad">Files parsed</deck-metric>
  <deck-metric value="1"  severity="ok">Used</deck-metric>
</deck-metric-list>

Customization tokens

--deck-metric-bg · --deck-metric-border · --deck-metric-text · --deck-metric-radius · --deck-metric-padding-x · --deck-metric-padding-y · --deck-metric-shadow · --deck-metric-label-color · --deck-metric-value-{bad,warn,ok,info}

<deck-metric-list>

Container · rule dividers between stacked <deck-metric> rows. No attributes · purely a layout grouping.

Example

<deck-metric-list>
  <deck-metric value="5"  severity="bad">Files parsed</deck-metric>
  <deck-metric value="1"  severity="ok">Used</deck-metric>
</deck-metric-list>

<deck-tier-list>

Tier list · for JIT levels, severity ladders, ranking.

Attributes

Example

<deck-tier-list>
  <deck-tier name="LLInt" speed="×1">Bytecode</deck-tier>
  <deck-tier name="FTL"   speed="×100" hot>LLVM</deck-tier>
</deck-tier-list>

Customization tokens

--deck-tier-bg · --deck-tier-border · --deck-tier-radius · --deck-tier-padding-x · --deck-tier-padding-y · --deck-tier-shadow · --deck-tier-name-color · --deck-tier-desc-color · --deck-tier-speed-{muted,warn,ok} · --deck-tier-hot-bg · --deck-tier-hot-border · --deck-tier-hot-color

<deck-step-list>

Numbered steps · big circle bullet, mono label, chip note.

Attributes

Example

<deck-step-list>
  <deck-step n="1" note="opens the deck">Cover</deck-step>
  <deck-step n="2" note="chapter break">Section</deck-step>
</deck-step-list>

Customization tokens

--deck-step-bg · --deck-step-border · --deck-step-radius · --deck-step-padding-x · --deck-step-padding-y · --deck-step-shadow · --deck-step-num-bg · --deck-step-num-color · --deck-step-num-size · --deck-step-label-color · --deck-step-chip-bg · --deck-step-chip-color

<deck-shortcut>

Keyboard shortcut row · keys + label + note. Pairs with <deck-shortcut-list>.

Attributes

Example

<deck-shortcut-list>
  <deck-shortcut keys="O" label="Overview" note="Path layout"/>
  <deck-shortcut keys="?" label="Help" note="Full shortcut overlay"/>
</deck-shortcut-list>

Customization tokens

--deck-kbd-bg · --deck-kbd-color · --deck-kbd-border · --deck-kbd-radius · --deck-kbd-padding-x · --deck-kbd-padding-y · --deck-kbd-accent-bg · --deck-kbd-ok-bg

<deck-punch>

Big punchline text · sized via attribute, color via tone.

Attributes

Example

<deck-punch size="display">Source = output.</deck-punch>

Customization tokens

--deck-punch-color · --deck-punch-size

<deck-stack>

Vertical (or horizontal) flex container · the most-used spacing helper.

Attributes

Example

<deck-stack gap="3">
  <deck-callout>One</deck-callout>
  <deck-callout>Two</deck-callout>
</deck-stack>

Customization tokens

--deck-stack-gap

<deck-grid>

Grid container · n columns by 1..12 or explicit template.

Attributes

Example

<deck-grid cols="3" gap="3" fill>
  <deck-card>a</deck-card>
  <deck-card>b</deck-card>
  <deck-card>c</deck-card>
</deck-grid>

Customization tokens

--deck-grid-gap

<deck-kicker>

Caption-style label above a section · uppercase, mono.

Attributes

Example

<deck-kicker>Before</deck-kicker>

Customization tokens

--deck-kicker-color · --deck-kicker-on-dark-color · --deck-kicker-font-size · --deck-kicker-tracking · --deck-kicker-margin

<deck-notes>

Speaker notes for a slide · hidden by default, surfaced in the presenter window (press P). Free-form text content.

Slots

Example

<deck-feature>
  <h1 slot="title">My slide</h1>
  <deck-notes>
    Talking points:
    - Mention the migration story
    - Pause for laughter on the Java joke
  </deck-notes>
</deck-feature>