Reference

Component library

Every <deck-*> element · attributes, slots, tokens, live preview. The default bundle has 36 core components; 23 optional elements are documented below.

Mental model · which one do I need?

The core elements you will meet first fit in five practical buckets; sub-elements and helpers follow in the catalogue. Start with the layout, then add only the building blocks the slide needs.

Layouts (8) · the slide's overall shape ·deck-cover,deck-section,deck-feature,deck-split,deck-feature-cards,deck-takeaway,deck-photo,deck-bento.
The five you'll always use · the talk-shaping blocks ·deck-code,deck-md,deck-card,deck-callout,deck-badge.
Domain blocks (8) · reach for when the slide needs one ·deck-stat,deck-metric,deck-tier-list,deck-step-list,deck-shortcut,deck-mermaid,deck-punch,deck-kicker.
Composition helpers · plumbing for spacing ·deck-stack,deck-grid.
Presenter helpers (3) · for the day of the talk ·deck-notes, plus the lazy-loaded deck-overview (press O) anddeck-presenter (press P).

New to Rikiki? Read the 5-component cheatsheetfirst · don't try to learn the whole catalog before your first talk.

This catalogue details 8 layouts and 27 building blocks from the default bundle, then 15 optional modules and the 8 child elements those modules define. Layouts give a slide its overall structure; the building blocks fill the slots. Every group follows the same design-token contract · override--deck-<tag>-* on the host to retheme a single instance, or globally on :root.

Layouts

One per typical slide kind. Pick the layout that matches the slide's job.

`<deck-cover>`

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

Attributes

Attribute	Type	Notes
`brand`	`string`	Text label · split on " · " (first segment = brand name)
`brand-src`	`URL`	Optional logo path
`speaker`	`string`
`company`	`string`
`company-src`	`URL`	Optional client logo · shown before the company name
`duration`	`string`
`audience`	`string`
`runtime`	`string`
`speaker-label`	`string`	Override the meta label · the default follows the document language
`company-label`	`string`
`duration-label`	`string`
`audience-label`	`string`
`runtime-label`	`string`

Slots

Slot	What goes in
`(default)`	Title (h1) and subtitle (.sub)

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>

Live preview · slide canvas

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-cover-bgBackground color or paint
Value for --deck-cover-bg
--deck-cover-textMain text color
Value for --deck-cover-text
--deck-cover-softSecondary text or surface color
Value for --deck-cover-soft
--deck-cover-mutedMuted text color
Value for --deck-cover-muted
--deck-cover-faintLowest emphasis text color
Value for --deck-cover-faint
--deck-cover-borderBorder color or complete border value
Value for --deck-cover-border

Show an override example

deck-cover {
  --deck-cover-bg: #f07020;
  --deck-cover-text: #f07020;
}

`<deck-section>`

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

Attributes

Attribute	Type	Notes
`num`	`string`	Small label above the title

Slots

Slot	What goes in
`(default)`	Title (h1)

Example

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

Live preview · slide canvas

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-section-bgBackground color or paint
Value for --deck-section-bg
--deck-section-num-colorColor of the named element
Value for --deck-section-num-color
--deck-section-title-colorColor of the named element
Value for --deck-section-title-color
--deck-section-em-colorColor of the named element
Value for --deck-section-em-color
--deck-section-rule-colorColor of the named element
Value for --deck-section-rule-color

Show an override example

deck-section {
  --deck-section-bg: #f07020;
  --deck-section-num-color: #f07020;
}

`<deck-feature>`

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

Attributes

Attribute	Type	Notes
`eyebrow`	`string`	Small pill above the title
`spread`	`between \| around \| evenly \| center \| end \| start`	How the leftover vertical space of the body is distributed · default start
`fill`	`boolean`	Let the body blocks take the leftover height instead · pair with a <deck-fit> child

Slots

Slot	What goes in
`title`	h1
`lead`	one-line intro
`(default)`	The focal block · usually deck-code, deck-mermaid, or a custom widget

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>

Live preview · slide canvas

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-eyebrow-bgBackground color or paint
Value for --deck-eyebrow-bg
--deck-eyebrow-colorColor of the named element
Value for --deck-eyebrow-color
--deck-eyebrow-radiusCorner radius
Value for --deck-eyebrow-radius
--deck-eyebrow-padding-xHorizontal inner spacing
Value for --deck-eyebrow-padding-x
--deck-eyebrow-padding-yVertical inner spacing
Value for --deck-eyebrow-padding-y

Show an override example

deck-feature {
  --deck-eyebrow-bg: #f07020;
  --deck-eyebrow-color: #f07020;
}

`<deck-split>`

Two or three columns of cards.

Attributes

Attribute	Type	Notes
`cols`	`"1-1" \| "1-2" \| "2-1" \| "3"`	Default 1-1
`gap`	`1..6`	maps to var(--rik-space-N)
`col-gap`	`1..6`	gap between children inside a column
`eyebrow`	`string`	Small pill above the title
`spread`	`between \| around \| evenly \| center \| end \| start`	How the leftover vertical space of the body is distributed · default start
`fill`	`boolean`	Let the body blocks take the leftover height instead
`pivot`	`string`	Symbol or word drawn between the two columns · turns a neutral split into a directed comparison. Two columns only
`winner`	`left \| right`	Which side carries the accent rule · absent for neither

Slots

Slot	What goes in
`title / lead`	header above the columns
`left / right`	2-col layout
`a / b / c`	3-col layout

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>

Live preview · slide canvas

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-split-gapSpacing between items
Value for --deck-split-gap
--deck-split-col-gapSpacing between columns
Value for --deck-split-col-gap
--deck-eyebrow-bgBackground color or paint
Value for --deck-eyebrow-bg
--deck-eyebrow-colorColor of the named element
Value for --deck-eyebrow-color

Show an override example

deck-split {
  --deck-split-gap: 1.5rem;
  --deck-split-col-gap: 1.5rem;
}

`<deck-feature-cards>`

Hero on top, two detail cards underneath.

Attributes

Attribute	Type	Notes
`eyebrow`	`string`

Slots

Slot	What goes in
`title / lead`	header
`(default)`	the hero block · usually deck-code or deck-mermaid
`left / right`	the two detail cards

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>

Live preview · slide canvas

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-feature-cards-gapSpacing between items
Value for --deck-feature-cards-gap
--deck-feature-cards-col-gapSpacing between columns
Value for --deck-feature-cards-col-gap
--deck-feature-cards-hero-flexFlex sizing of the named region
Value for --deck-feature-cards-hero-flex
--deck-feature-cards-detail-flexFlex sizing of the named region
Value for --deck-feature-cards-detail-flex
--deck-eyebrow-bgBackground color or paint
Value for --deck-eyebrow-bg
--deck-eyebrow-colorColor of the named element
Value for --deck-eyebrow-color

Show an override example

deck-feature-cards {
  --deck-feature-cards-gap: 1.5rem;
  --deck-feature-cards-col-gap: 1.5rem;
}

`<deck-takeaway>`

Centered punchline on dark · the take-home line.

Attributes

Attribute	Type	Notes
`kicker`	`string`	Small caption above the punch
`spread`	`between \| around \| evenly \| center \| end \| start`	How the leftover vertical space of the body is distributed · default start
`fill`	`boolean`	Let the body blocks take the leftover height instead

Slots

Slot	What goes in
`(default)`	Use <deck-punch size="display"> for the big text

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>

Live preview · slide canvas

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-takeaway-bgBackground color or paint
Value for --deck-takeaway-bg
--deck-takeaway-display-colorColor of the named element
Value for --deck-takeaway-display-color
--deck-takeaway-caption-colorColor of the named element
Value for --deck-takeaway-caption-color
--deck-takeaway-gapSpacing between items
Value for --deck-takeaway-gap

Show an override example

deck-takeaway {
  --deck-takeaway-bg: #f07020;
  --deck-takeaway-display-color: #f07020;
}

`<deck-photo>`

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

Attributes

Attribute	Type	Notes
`src`	`URL`	Image URL · required
`position`	`CSS object-position`	Default "center"
`darken`	`0..1`	Overlay alpha · default 0.35
`align`	`top \| center \| bottom`	Vertical alignment of slotted content
`text-align`	`left \| center \| right`	Text alignment inside the overlay · default left

Slots

Slot	What goes in
`(default)`	Title (h1), subtitle (.sub), or any HTML to overlay on the image

Example

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

Live preview · slide canvas

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-photo-overlay-colorColor of the named element
Value for --deck-photo-overlay-color
--deck-photo-text-colorColor of the named element
Value for --deck-photo-text-color
--deck-photo-text-mutedMuted text color
Value for --deck-photo-text-muted
--deck-photo-content-max-widthWidth of the named element
Value for --deck-photo-content-max-width
--deck-photo-padding-xHorizontal inner spacing
Value for --deck-photo-padding-x
--deck-photo-padding-yVertical inner spacing
Value for --deck-photo-padding-y

Show an override example

deck-photo {
  --deck-photo-overlay-color: #f07020;
  --deck-photo-text-color: #f07020;
}

`<deck-bento>`

Bento grid slide · cells share a multi-row, multi-column canvas.

Attributes

Attribute	Type	Notes
`eyebrow`	`string`
`cols`	`1..12 \| template`	default 2
`rows`	`1..12 \| template`	default 1 full-height row
`gap`	`1..6 \| CSS length`	default 3
`align`	`start \| center \| end \| stretch`	align-items on every cell
`justify`	`start \| center \| end \| stretch`	justify-items on every cell

Slots

Slot	What goes in
`title`	Slide title (<h1>)
`(default)`	deck-point children for words, deck-cell for anything measured

Example

<deck-bento eyebrow="Layout" cols="3" rows="2">
  <h1 slot="title">Cells share the space</h1>
  <deck-cell col="1 / 3" row="1"><deck-punch fit>Measured</deck-punch></deck-cell>
  <deck-cell col="3 / 4" row="1 / 3" tone="info"><h3>Tall</h3><p>Two rows.</p></deck-cell>
  <deck-point col="1 / 2" row="2 / 3" tone="ok"><h3>A</h3><p>Placed explicitly.</p></deck-point>
  <deck-point col="2 / 3" row="2 / 3" tone="warn"><h3>B</h3><p>No grid ambiguity.</p></deck-point>
</deck-bento>

Live preview · slide canvas

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-bento-gapSpacing between items
Value for --deck-bento-gap

Show an override example

deck-bento {
  --deck-bento-gap: 1.5rem;
}

Building blocks

The building blocks you slot inside layouts, grouped by what they are for: first the ones that carry text, then the ones that carry data, then the ones that shape the slide, then the ones that embed code and diagrams.

`<deck-md>`

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

Example

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

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-md-pre-bgBackground color or paint
Value for --deck-md-pre-bg
--deck-md-pre-borderBorder color or complete border value
Value for --deck-md-pre-border
--deck-md-pre-textMain text color
Value for --deck-md-pre-text

Show an override example

deck-md {
  --deck-md-pre-bg: #f07020;
  --deck-md-pre-border: 1px solid #f07020;
}

`<deck-punch>`

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

Attributes

Attribute	Type	Notes
`size`	`lead \| big \| mega \| stat \| display`
`tone`	`warn \| danger \| ok \| info \| muted \| accent`
`weight`	`700 \| 800 \| 900`
`align`	`left \| center \| right`
`fit`	`boolean`	Shrink to fit the box · overrides size and the fluid cqw scaling
`fit-min`	`rem`	Fit floor · default 1
`fit-max`	`rem`	Fit ceiling · default 12

Example

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

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-punch-colorColor of the named element
Value for --deck-punch-color
--deck-punch-sizeSize of the named element
Value for --deck-punch-size

Show an override example

deck-punch {
  --deck-punch-color: #f07020;
  --deck-punch-size: 2rem;
}

`<deck-fit>`

Shrink slotted text to fit its box by font-size · not for images.

Attributes

Attribute	Type	Notes
`min`	`rem`	default 1
`max`	`rem`	default 12

Example

<deck-fit max="6">
  A line that shrinks until it fits its cell.
</deck-fit>

Live preview

`<deck-kicker>`

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

Attributes

Attribute	Type	Notes
`on-dark`	`boolean`	Switch to the inverse-surface palette · use on dark backgrounds

Example

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

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-kicker-colorColor of the named element
Value for --deck-kicker-color
--deck-kicker-on-dark-colorColor of the named element
Value for --deck-kicker-on-dark-color
--deck-kicker-font-sizeFont size
Value for --deck-kicker-font-size
--deck-kicker-trackingLetter spacing
Value for --deck-kicker-tracking
--deck-kicker-marginVisual value used by the named part
Value for --deck-kicker-margin

Show an override example

deck-kicker {
  --deck-kicker-color: #f07020;
  --deck-kicker-on-dark-color: #f07020;
}

`<deck-badge>`

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

Attributes

Attribute	Type	Notes
`type`	`bad \| ok \| info \| warn \| neutral`

Example

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

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-badge-bgBackground color or paint
Value for --deck-badge-bg
--deck-badge-fgForeground color
Value for --deck-badge-fg
--deck-badge-borderBorder color or complete border value
Value for --deck-badge-border
--deck-badge-radiusCorner radius
Value for --deck-badge-radius
--deck-badge-padding-xHorizontal inner spacing
Value for --deck-badge-padding-x
--deck-badge-padding-yVertical inner spacing
Value for --deck-badge-padding-y

Show an override example

deck-badge {
  --deck-badge-bg: #f07020;
  --deck-badge-fg: #f07020;
}

`<deck-kbd>`

One keyboard key chip · inline anywhere in body text, and the piece <deck-shortcut> draws its keys from.

Attributes

Attribute	Type	Notes
`tone`	`accent \| ok`	Paint the chip when one key in a run deserves the emphasis

Slots

Slot	What goes in
`(default)`	The key name · Esc, ⌘, PgDn

Example

<p>Press <deck-kbd>P</deck-kbd> to open the presenter window.</p>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-kbd-bgBackground color or paint
Value for --deck-kbd-bg
--deck-kbd-colorColor of the named element
Value for --deck-kbd-color
--deck-kbd-borderBorder color or complete border value
Value for --deck-kbd-border
--deck-kbd-radiusCorner radius
Value for --deck-kbd-radius
--deck-kbd-padding-xHorizontal inner spacing
Value for --deck-kbd-padding-x
--deck-kbd-padding-yVertical inner spacing
Value for --deck-kbd-padding-y
--deck-kbd-accent-bgBackground color or paint
Value for --deck-kbd-accent-bg
--deck-kbd-ok-bgBackground color or paint
Value for --deck-kbd-ok-bg

Show an override example

deck-kbd {
  --deck-kbd-bg: #f07020;
  --deck-kbd-color: #f07020;
}

`<deck-callout>`

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

Attributes

Attribute	Type	Notes
`type`	`info \| warn \| danger \| ok`
`on-dark`	`boolean`	Readable surface and inverse text inside a dark layout

Example

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

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-callout-bgBackground color or paint
Value for --deck-callout-bg
--deck-callout-borderBorder color or complete border value
Value for --deck-callout-border
--deck-callout-strokeVisual value used by the named part
Value for --deck-callout-stroke
--deck-callout-radiusCorner radius
Value for --deck-callout-radius
--deck-callout-padding-xHorizontal inner spacing
Value for --deck-callout-padding-x
--deck-callout-padding-yVertical inner spacing
Value for --deck-callout-padding-y
--deck-callout-colorColor of the named element
Value for --deck-callout-color
--deck-callout-strong-colorColor of the named element
Value for --deck-callout-strong-color
--deck-callout-code-bgBackground color or paint
Value for --deck-callout-code-bg

Show an override example

deck-callout {
  --deck-callout-bg: #f07020;
  --deck-callout-border: 1px solid #f07020;
}

`<deck-notes>`

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

Slots

Slot	What goes in
`(default)`	Plain text or markup · displayed as-is in the presenter window

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>

Live preview · slide canvas

`<deck-stat>`

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

Attributes

Attribute	Type	Notes
`num`	`string`	Huge display-font number
`tone`	`yellow\|orange\|green\|red\|purple\|lime\|cyan`
`compact`	`boolean`	Smaller scale, for a row of stats rather than one hero figure

Slots

Slot	What goes in
`claim`	Mid-size headline below the number
`(default)`	One line of body text

Example

<deck-stat num="01" tone="orange">
  <h3 slot="claim">Serve a folder</h3>
  No build, no toolchain.
</deck-stat>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-stat-colorColor of the named element
Value for --deck-stat-color
--deck-stat-num-sizeSize of the named element
Value for --deck-stat-num-size
--deck-stat-num-weightFont weight
Value for --deck-stat-num-weight
--deck-stat-claim-colorColor of the named element
Value for --deck-stat-claim-color
--deck-stat-body-colorColor of the named element
Value for --deck-stat-body-color
--deck-stat-border-widthBorder thickness
Value for --deck-stat-border-width
--deck-stat-padding-xHorizontal inner spacing
Value for --deck-stat-padding-x
--deck-stat-padding-yVertical inner spacing
Value for --deck-stat-padding-y
--deck-stat-gapSpacing between items
Value for --deck-stat-gap

Show an override example

deck-stat {
  --deck-stat-color: #f07020;
  --deck-stat-num-size: 2rem;
}

`<deck-metric>`

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

Attributes

Attribute	Type	Notes
`value`	`string`
`severity`	`bad \| warn \| ok \| info`
`mono`	`boolean`

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>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-metric-bgBackground color or paint
Value for --deck-metric-bg
--deck-metric-borderBorder color or complete border value
Value for --deck-metric-border
--deck-metric-textMain text color
Value for --deck-metric-text
--deck-metric-radiusCorner radius
Value for --deck-metric-radius
--deck-metric-padding-xHorizontal inner spacing
Value for --deck-metric-padding-x
--deck-metric-padding-yVertical inner spacing
Value for --deck-metric-padding-y
--deck-metric-shadowBox shadow
Value for --deck-metric-shadow
--deck-metric-label-colorColor of the named element
Value for --deck-metric-label-color
--deck-metric-value-{bad,warn,ok,info}Value color for this semantic state
Value for --deck-metric-value-{bad,warn,ok,info}

Show an override example

deck-metric {
  --deck-metric-bg: #f07020;
  --deck-metric-border: 1px solid #f07020;
}

`<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>

Live preview

`<deck-csv>`

Inline CSV rendered as a styled table · cells are trimmed.

Attributes

Attribute	Type	Notes
`delimiter`	`string`	default ","
`no-header`	`boolean`	first row is data
`fit`	`boolean`	shrink the table to fit its box
`fit-min`	`rem`	default 0.6
`fit-max`	`rem`	default 2
`highlight-rows`	`string`	1-based body rows to emphasise · "2" or "2 5"
`highlight-cols`	`string`	1-based columns to emphasise · same grammar
`reveal`	`boolean`	show one body row per step instead of the whole table

Example

<deck-csv delimiter=";" highlight-rows="2" fit>
  Region; Users; Plan
  EMEA; 12 040; Pro
  APAC; 9 310; Pro
</deck-csv>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-csv-borderBorder color or complete border value
Value for --deck-csv-border
--deck-csv-header-bgBackground color or paint
Value for --deck-csv-header-bg
--deck-csv-padding-xHorizontal inner spacing
Value for --deck-csv-padding-x
--deck-csv-padding-yVertical inner spacing
Value for --deck-csv-padding-y

Show an override example

deck-csv {
  --deck-csv-border: 1px solid #f07020;
  --deck-csv-header-bg: #f07020;
}

`<deck-tier-list>`

Tier ladder · stacks <deck-tier> rows for JIT levels, severity ladders, ranking. No attributes · the rows carry the data.

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>

Live preview

`<deck-tier>`

One tier of a <deck-tier-list> · name on the left, speed on the right, description in the default slot.

Attributes

Attribute	Type	Notes
`name`	`string`	Left-hand label, in the mono face
`speed`	`string`	Right-side figure · free text, not only a number
`severity`	`muted \| warn \| ok`	Colors the speed figure
`hot`	`boolean`	Marks the top tier · tints the row and the figure with the accent

Slots

Slot	What goes in
`(default)`	Description line under the name

Example

<deck-tier-list>
  <deck-tier name="LLInt" speed="×1"   severity="muted">Bytecode interpreter</deck-tier>
  <deck-tier name="DFG"   speed="×8"   severity="ok">Optimizing JIT</deck-tier>
  <deck-tier name="FTL"   speed="×100" hot>Top-tier JIT</deck-tier>
</deck-tier-list>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-tier-bgBackground color or paint
Value for --deck-tier-bg
--deck-tier-borderBorder color or complete border value
Value for --deck-tier-border
--deck-tier-radiusCorner radius
Value for --deck-tier-radius
--deck-tier-padding-xHorizontal inner spacing
Value for --deck-tier-padding-x
--deck-tier-padding-yVertical inner spacing
Value for --deck-tier-padding-y
--deck-tier-shadowBox shadow
Value for --deck-tier-shadow
--deck-tier-name-colorColor of the named element
Value for --deck-tier-name-color
--deck-tier-desc-colorColor of the named element
Value for --deck-tier-desc-color
--deck-tier-speed-{muted,warn,ok}Speed indicator color for this state
Value for --deck-tier-speed-{muted,warn,ok}
--deck-tier-hot-bgBackground color or paint
Value for --deck-tier-hot-bg
--deck-tier-hot-borderBorder color or complete border value
Value for --deck-tier-hot-border
--deck-tier-hot-colorColor of the named element
Value for --deck-tier-hot-color

Show an override example

deck-tier {
  --deck-tier-bg: #f07020;
  --deck-tier-border: 1px solid #f07020;
}

`<deck-tier-arrow>`

Separator note between two tiers of a deck-tier-list.

Example

<deck-tier-list>
  <deck-tier name="S" speed="×1">Ships today</deck-tier>
  <deck-tier-arrow>after ~6 runs</deck-tier-arrow>
  <deck-tier name="A" speed="×10">Ships next</deck-tier>
</deck-tier-list>

Live preview

`<deck-step-list>`

Numbered steps · stacks <deck-step> rows, or chains them across the width.

Attributes

Attribute	Type	Notes
`direction`	`column \| row`	default column · row lays the steps as a chain across the width
`no-connectors`	`boolean`	Drop the connector drawn between steps in row direction

Slots

Slot	What goes in
`(default)`	<deck-step> children

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>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-step-list-gapSpacing between items
Value for --deck-step-list-gap
--deck-step-list-connectorVisual value used by the named part
Value for --deck-step-list-connector
--deck-step-list-arrowVisual value used by the named part
Value for --deck-step-list-arrow

Show an override example

deck-step-list {
  --deck-step-list-gap: 1.5rem;
  --deck-step-list-connector: #f07020;
}

`<deck-step>`

One step of a <deck-step-list> · number, label, and the note that explains it.

Attributes

Attribute	Type	Notes
`n`	`string`	Number or letter carrying the sequence
`note`	`string`	Supporting explanation, read after the label
`note-position`	`inline \| below`	default inline · below puts the note under its label, which keeps a row of steps readable

Slots

Slot	What goes in
`(default)`	The step label

Example

<deck-step-list direction="row">
  <deck-step n="1" note="What the check measures" note-position="below">Inspect</deck-step>
  <deck-step n="2" note="What it writes" note-position="below">Report</deck-step>
</deck-step-list>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-step-ruleDivider color or complete divider value
Value for --deck-step-rule
--deck-step-padding-yVertical inner spacing
Value for --deck-step-padding-y
--deck-step-num-colorColor of the named element
Value for --deck-step-num-color
--deck-step-num-sizeSize of the named element
Value for --deck-step-num-size
--deck-step-num-scaleVisual value used by the named part
Value for --deck-step-num-scale
--deck-step-label-colorColor of the named element
Value for --deck-step-label-color
--deck-step-note-colorColor of the named element
Value for --deck-step-note-color
--deck-step-note-gapSpacing between items
Value for --deck-step-note-gap

Show an override example

deck-step {
  --deck-step-rule: 1px solid #f07020;
  --deck-step-padding-y: 1.5rem;
}

`<deck-shortcut-list>`

Two-column grid of <deck-shortcut> rows, with a separator line under each.

Attributes

Attribute	Type	Notes
`cols`	`string`	Set to "1" for a single column · the default is two
`col-gap`	`1..6`	Space between the two columns

Slots

Slot	What goes in
`(default)`	<deck-shortcut> children

Example

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

Live preview

`<deck-shortcut>`

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

Attributes

Attribute	Type	Notes
`keys`	`string`	Space-separated · e.g. "Space PgDn"
`label`	`string`
`note`	`string`	Falls back to the default slot when absent
`tone`	`accent \| ok`	Paints the keys of this row

Slots

Slot	What goes in
`(default)`	The note, when it is richer than a string attribute

Example

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

Live preview

`<deck-stack>`

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

Attributes

Attribute	Type	Notes
`gap`	`1..6`
`direction`	`column \| row`
`align`	`start \| center \| end \| stretch`
`justify`	`start \| center \| end \| between \| around`

Example

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

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-stack-gapSpacing between items
Value for --deck-stack-gap

Show an override example

deck-stack {
  --deck-stack-gap: 1.5rem;
}

`<deck-grid>`

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

Attributes

Attribute	Type	Notes
`cols`	`1..12 \| "1fr 2fr" \| ...`
`rows`	`1..12 \| "auto 1fr" \| ...`	Optional explicit row template
`gap`	`1..6`
`align`	`start \| center \| end \| stretch`	align-items
`justify`	`start \| center \| end \| stretch`	justify-items
`fill`	`boolean`	Take the parent slide's full height

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>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-grid-gapSpacing between items
Value for --deck-grid-gap

Show an override example

deck-grid {
  --deck-grid-gap: 1.5rem;
}

`<deck-card>`

Tinted card · yellow, orange, green, red.

Attributes

Attribute	Type	Notes
`color`	`yellow \| orange \| green \| red`
`center`	`boolean`
`compact`	`boolean`	reduced padding

Example

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

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-card-bgBackground color or paint
Value for --deck-card-bg
--deck-card-borderBorder color or complete border value
Value for --deck-card-border
--deck-card-textMain text color
Value for --deck-card-text
--deck-card-title-colorColor of the named element
Value for --deck-card-title-color
--deck-card-radiusCorner radius
Value for --deck-card-radius
--deck-card-padding-xHorizontal inner spacing
Value for --deck-card-padding-x
--deck-card-padding-yVertical inner spacing
Value for --deck-card-padding-y
--deck-card-shadowBox shadow
Value for --deck-card-shadow
--deck-card-gapSpacing between items
Value for --deck-card-gap

Show an override example

deck-card {
  --deck-card-bg: #f07020;
  --deck-card-border: 1px solid #f07020;
}

`<deck-source>`

A source or credit line, placed under any evidence block · deck-csv, deck-table, deck-bar, deck-kpi-grid, deck-annotate, or plain prose.

Attributes

Attribute	Type	Notes
`href`	`string`	Turns the credit into a link

Slots

Slot	What goes in
`(default)`	The credit text, e.g. "Word, p. 12"

Example

<deck-csv>
  Region; Users
  EMEA; 12 040
</deck-csv>
<deck-source href="https://example.com/report">Annual report, p. 4</deck-source>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-source-colorColor of the named element
Value for --deck-source-color
--deck-source-gapSpacing between items
Value for --deck-source-gap

Show an override example

deck-source {
  --deck-source-color: #f07020;
  --deck-source-gap: 1.5rem;
}

`<deck-cell>`

Bento grid item · a size container, so child cqw/cqh type scales against the cell.

Attributes

Attribute	Type	Notes
`span`	`"CxR" \| column count`	e.g. 2x1
`col`	`integer \| line syntax`	per-axis override
`row`	`integer \| line syntax`	per-axis override
`tone`	`info \| warn \| ok \| danger`
`plain`	`boolean`	drop the card chrome
`flat`	`boolean`	keep the surface, drop the border
`align`	`start \| center \| end \| stretch`	HORIZONTAL · align-items
`justify`	`start \| center \| end \| between`	VERTICAL · justify-content

Example

<deck-cell span="2x1" tone="ok" justify="end">
  <h3>Bottom-aligned</h3>
</deck-cell>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-cell-bgBackground color or paint
Value for --deck-cell-bg
--deck-cell-borderBorder color or complete border value
Value for --deck-cell-border
--deck-cell-radiusCorner radius
Value for --deck-cell-radius
--deck-cell-padding-xHorizontal inner spacing
Value for --deck-cell-padding-x
--deck-cell-padding-yVertical inner spacing
Value for --deck-cell-padding-y
--deck-cell-gapSpacing between items
Value for --deck-cell-gap

Show an override example

deck-cell {
  --deck-cell-bg: #f07020;
  --deck-cell-border: 1px solid #f07020;
}

`<deck-point>`

Bento item sized BY its content · reach for it when the item holds words, and for deck-cell when it holds something measured.

Attributes

Attribute	Type	Notes
`span`	`"CxR" \| column count`	e.g. 2x1 · col/row override it
`col`	`integer \| line syntax`	per-axis override
`row`	`integer \| line syntax`	per-axis override
`tone`	`info \| warn \| ok \| danger`
`plain`	`boolean`	stop painting the chrome · the gutter and border width stay, so the reading edge matches a painted sibling
`flat`	`boolean`	keep the surface, drop the border
`align`	`start \| center \| end \| stretch`	HORIZONTAL · there is no justify, a point has no leftover height to distribute

Slots

Slot	What goes in
`(default)`	A title (h3) and its body text

Example

<deck-point tone="ok">
  <h3>Sized by its words</h3>
  <p>No hole under the text, whatever the title wraps to.</p>
</deck-point>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-cell-bgBackground color or paint
Value for --deck-cell-bg
--deck-cell-borderBorder color or complete border value
Value for --deck-cell-border
--deck-cell-radiusCorner radius
Value for --deck-cell-radius
--deck-cell-padding-xHorizontal inner spacing
Value for --deck-cell-padding-x
--deck-cell-padding-yVertical inner spacing
Value for --deck-cell-padding-y
--deck-cell-gapSpacing between items
Value for --deck-cell-gap

Show an override example

deck-point {
  --deck-cell-bg: #f07020;
  --deck-cell-border: 1px solid #f07020;
}

`<deck-code>`

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

Attributes

Attribute	Type	Notes
`lang`	`js \| ts \| html \| css \| …`
`hero`	`boolean`	centers vertically as the focal block
`nested`	`boolean`	no shadow, lighter border (inside a card)
`step-groups`	`JSON`	[[1,2],[3,4]] · highlight subsets of lines on each step

Example

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

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-code-bgBackground color or paint
Value for --deck-code-bg
--deck-code-borderBorder color or complete border value
Value for --deck-code-border
--deck-code-textMain text color
Value for --deck-code-text
--deck-code-radiusCorner radius
Value for --deck-code-radius
--deck-code-padding-xHorizontal inner spacing
Value for --deck-code-padding-x
--deck-code-padding-yVertical inner spacing
Value for --deck-code-padding-y
--deck-code-syntax-{kw,str,num,cmt,ty,prop,fn}Syntax color for this token category
Value for --deck-code-syntax-{kw,str,num,cmt,ty,prop,fn}

Show an override example

deck-code {
  --deck-code-bg: #f07020;
  --deck-code-border: 1px solid #f07020;
}

`<deck-mermaid>`

Mermaid diagram. Needs rikiki/dist/vendor/mermaid.min.js beside the runtime: start the deck with `init --with-mermaid` (or copy the file in), and pass --with-mermaid to bundle.

Attributes

Attribute	Type	Notes
`compact`	`boolean`	reduced padding and max-width

Example

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

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-mermaid-bgBackground color or paint
Value for --deck-mermaid-bg
--deck-mermaid-borderBorder color or complete border value
Value for --deck-mermaid-border
--deck-mermaid-paddingInner spacing
Value for --deck-mermaid-padding
--deck-mermaid-radiusCorner radius
Value for --deck-mermaid-radius

Show an override example

deck-mermaid {
  --deck-mermaid-bg: #f07020;
  --deck-mermaid-border: 1px solid #f07020;
}

Optional modules

These elements are not imported by the default bundle. They are compiled as separate modules and reach the browser only when a deck imports them, so a deck that does not use one pays nothing for it. Import the matching file fromrikiki/dist/ after the core runtime. Several modules also define child elements · those are documented under the module that defines them.

Element	Purpose	Module
`<deck-agenda>`	Agenda that follows the deck sections and marks the current chapter.	`deck-agenda.js`
`<deck-annotate>`	Image or screenshot with numbered marks, progressive reveal, and an optional legend.	`deck-annotate.js`
`<deck-bar>`	Single value or stacked horizontal bar for progress, proportions, or budgets.	`deck-bar.js`
`<deck-checklist>`	Responsive checklist container for yes/no decisions and acceptance criteria.	`deck-checklist.js`
`<deck-figure>`	Screenshot, diagram or chart with its caption and source credit attached to the image.	`deck-figure.js`
`<deck-flow>`	Stage based process diagram with labels, notes, connectors, and reveal states.	`deck-flow.js`
`<deck-graph>`	Positioned node and edge graph for architecture, dependencies, or relationships.	`deck-graph.js`
`<deck-icon>`	Consistent icon slot or named glyph from the bundled icon set.	`deck-icon.js`
`<deck-kpi-grid>`	Aligned KPI figures with optional rules between the values.	`deck-kpi-grid.js`
`<deck-persona>`	Audience or user framing block with avatar, name, role, organisation, and context.	`deck-persona.js`
`<deck-pull>`	Large pull quote that can occupy the full width or float to one side.	`deck-pull.js`
`<deck-quote>`	Attributed quote with controlled mark, size, contrast, and author role.	`deck-quote.js`
`<deck-table>`	Progressive table wrapper that highlights rows or columns as steps advance.	`deck-table.js`
`<deck-timeline>`	Chronological milestone track with row or column direction and progressive reveal.	`deck-timeline.js`
`<deck-versus>`	Two sided decision layout with a central pivot and an optional winner.	`deck-versus.js`

`<deck-agenda>`

Agenda that follows the deck sections and marks the current chapter.

Module

rikiki/dist/deck-agenda.js

Attributes

Attribute	Type or value
`no-numbers`	`boolean`
`no-jump`	`boolean`

Slots and children

Slot or child	What goes in
`default`	reads deck-section titles from the nearest deck-root

Example

<deck-agenda></deck-agenda>

Live preview · slide canvas

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-agenda-gapSpacing between items
Value for --deck-agenda-gap
--deck-agenda-sizeSize of the named element
Value for --deck-agenda-size
--deck-agenda-colorColor of the named element
Value for --deck-agenda-color
--deck-agenda-done-colorColor of the named element
Value for --deck-agenda-done-color
--deck-agenda-current-colorColor of the named element
Value for --deck-agenda-current-color
--deck-agenda-markerMarker color or paint
Value for --deck-agenda-marker
--deck-agenda-ruleDivider color or complete divider value
Value for --deck-agenda-rule
--deck-agenda-num-colorColor of the named element
Value for --deck-agenda-num-color

Show an override example

deck-agenda {
  --deck-agenda-gap: 1.5rem;
  --deck-agenda-size: 2rem;
}

`<deck-annotate>`

Image or screenshot with numbered marks, progressive reveal, and an optional legend.

Module

rikiki/dist/deck-annotate.js

Attributes

Attribute	Type or value
`src`	`URL`
`alt`	`string`
`marks`	`JSON/string mark data`
`all-at-once`	`boolean`
`no-legend`	`boolean`
`leader`	`boolean`
`offset`	`x,y pixels or a named side (above, below, left, right)`
`offsets`	`one displacement per mark, separated by \|`
`caption`	`figure caption`
`source`	`credit line`
`source-href`	`turns the credit into a link`

Slots and children

Slot or child	What goes in
`default`	optional legend content when marks do not provide one
`caption`	boolean
`source`	boolean

Example

<deck-annotate src="/screen.png" alt="Product screen" marks="1:42,18,2:74,55"></deck-annotate>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-annotate-radiusCorner radius
Value for --deck-annotate-radius
--deck-annotate-borderBorder color or complete border value
Value for --deck-annotate-border
--deck-annotate-mark-bgBackground color or paint
Value for --deck-annotate-mark-bg
--deck-annotate-mark-colorColor of the named element
Value for --deck-annotate-mark-color
--deck-annotate-mark-sizeSize of the named element
Value for --deck-annotate-mark-size
--deck-annotate-mark-ringVisual value used by the named part
Value for --deck-annotate-mark-ring
--deck-annotate-leaderVisual value used by the named part
Value for --deck-annotate-leader
--deck-annotate-leader-widthWidth of the named element
Value for --deck-annotate-leader-width
--deck-annotate-legend-colorColor of the named element
Value for --deck-annotate-legend-color
--deck-annotate-legend-sizeSize of the named element
Value for --deck-annotate-legend-size
--deck-annotate-gapSpacing between items
Value for --deck-annotate-gap

Show an override example

deck-annotate {
  --deck-annotate-radius: 14px;
  --deck-annotate-border: 1px solid #f07020;
}

`<deck-bar>`

Single value or stacked horizontal bar for progress, proportions, or budgets.

Module

rikiki/dist/deck-bar.js

Attributes

Attribute	Type or value
`value`	`number`
`total`	`number`
`label`	`string`
`tone`	`accent\|ok\|warn\|danger\|info\|muted`
`segments`	`JSON`
`no-value`	`boolean`
`no-legend`	`boolean`

Slots and children

Slot or child	What goes in
`default`	optional legend content

Example

<deck-bar label="Coverage" value="82" total="100" tone="ok"></deck-bar>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-bar-trackVisual value used by the named part
Value for --deck-bar-track
--deck-bar-heightHeight of the named element
Value for --deck-bar-height
--deck-bar-radiusCorner radius
Value for --deck-bar-radius
--deck-bar-gapSpacing between items
Value for --deck-bar-gap
--deck-bar-label-colorColor of the named element
Value for --deck-bar-label-color
--deck-bar-value-colorColor of the named element
Value for --deck-bar-value-color
--deck-bar-legend-colorColor of the named element
Value for --deck-bar-legend-color
--deck-bar-legend-sizeSize of the named element
Value for --deck-bar-legend-size
--deck-bar-fillVisual value used by the named part
Value for --deck-bar-fill
--deck-bar-dividerVisual value used by the named part
Value for --deck-bar-divider

Show an override example

deck-bar {
  --deck-bar-track: #f07020;
  --deck-bar-height: 2rem;
}

`<deck-checklist>`

Responsive checklist container for yes/no decisions and acceptance criteria.

Module

rikiki/dist/deck-checklist.js

Attributes

Attribute	Type or value
`cols`	`number/string`

Slots and children

Slot or child	What goes in
`default`	deck-check children

Example

<deck-checklist cols="2">
  <deck-check>Offline bundle</deck-check>
  <deck-check no>External CDN</deck-check>
</deck-checklist>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-checklist-gapSpacing between items
Value for --deck-checklist-gap
--deck-checklist-colsGrid column template
Value for --deck-checklist-cols
--deck-checklist-ruleDivider color or complete divider value
Value for --deck-checklist-rule
--deck-check-yesVisual value used by the named part
Value for --deck-check-yes
--deck-check-noVisual value used by the named part
Value for --deck-check-no
--deck-check-sizeSize of the named element
Value for --deck-check-size
--deck-check-gapSpacing between items
Value for --deck-check-gap
--deck-check-colorColor of the named element
Value for --deck-check-color

Show an override example

deck-checklist {
  --deck-checklist-gap: 1.5rem;
  --deck-checklist-cols: #f07020;
}

`<deck-check>`

One line of a checklist · a yes by default, a no when the attribute says so.

Attributes

Attribute	Type	Notes
`no`	`boolean`	Mark the line as not met · swaps the yes glyph for the no one

Slots

Slot	What goes in
`(default)`	The criterion being checked

Example

<deck-checklist cols="2">
  <deck-check>Offline bundle</deck-check>
  <deck-check no>External CDN</deck-check>
</deck-checklist>

`<deck-figure>`

Screenshot, diagram or chart with its caption and source credit attached to the image.

Module

rikiki/dist/deck-figure.js

Attributes

Attribute	Type or value
`src`	`image URL`
`alt`	`text alternative, required unless decorative`
`caption`	`string`
`source`	`string`
`source-href`	`URL`
`decorative`	`boolean`

Slots and children

Slot or child	What goes in
`image`	media used when src is absent
`caption`	rich caption content
`source`	rich credit content

Example

<deck-figure
  src="/build-duration.png"
  alt="Build duration by pipeline stage"
  caption="The cache removes most of the install cost."
  source="CI benchmark"
></deck-figure>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-figure-gapSpacing between items
Value for --deck-figure-gap
--deck-figure-image-fitVisual value used by the named part
Value for --deck-figure-image-fit
--deck-figure-image-positionVisual value used by the named part
Value for --deck-figure-image-position
--deck-figure-radiusCorner radius
Value for --deck-figure-radius
--deck-figure-borderBorder color or complete border value
Value for --deck-figure-border
--deck-figure-bgBackground color or paint
Value for --deck-figure-bg
--deck-figure-caption-colorColor of the named element
Value for --deck-figure-caption-color
--deck-figure-source-colorColor of the named element
Value for --deck-figure-source-color
--deck-figure-max-heightHeight of the named element
Value for --deck-figure-max-height

Show an override example

deck-figure {
  --deck-figure-gap: 1.5rem;
  --deck-figure-image-fit: #f07020;
}

`<deck-flow>`

Stage based process diagram with labels, notes, connectors, and reveal states.

Module

rikiki/dist/deck-flow.js

Attributes

Attribute	Type or value
`cols`	`number/string`
`no-connectors`	`boolean`
`reveal`	`boolean`

Slots and children

Slot or child	What goes in
`default`	deck-flow-step children

Example

<deck-flow cols="4">
  <deck-flow-step label="Write" note="brief">
    Source
  </deck-flow-step>
  <deck-flow-step label="Check" note="evidence">
    Review
  </deck-flow-step>
</deck-flow>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-flow-gapSpacing between items
Value for --deck-flow-gap
--deck-flow-step-accentVisual value used by the named part
Value for --deck-flow-step-accent
--deck-flow-step-label-colorColor of the named element
Value for --deck-flow-step-label-color
--deck-flow-step-note-colorColor of the named element
Value for --deck-flow-step-note-color
--deck-flow-step-pending-opacityOpacity
Value for --deck-flow-step-pending-opacity
--deck-flow-linkVisual value used by the named part
Value for --deck-flow-link

Show an override example

deck-flow {
  --deck-flow-gap: 1.5rem;
  --deck-flow-step-accent: #f07020;
}

`<deck-flow-step>`

One stage of a flow · an index, a label, a note, and the body text under them.

Attributes

Attribute	Type	Notes
`label`	`string`	Stage name
`note`	`string`	Short qualifier under the label
`plain`	`boolean`	Stop the active stage from taking the block
`index`	`string`	Position in the chain · written by deck-flow on every update, not by the author
`last`	`boolean`	Written by deck-flow on the final stage · it has nothing to point at
`linked`	`boolean`	Written by deck-flow from its own no-connectors attribute

Slots

Slot	What goes in
`(default)`	The body text of the stage

Example

<deck-flow cols="2">
  <deck-flow-step label="Write" note="brief">Source</deck-flow-step>
  <deck-flow-step label="Check" note="evidence">Review</deck-flow-step>
</deck-flow>

`<deck-graph>`

Positioned node and edge graph for architecture, dependencies, or relationships.

Module

rikiki/dist/deck-graph.js

Attributes

Attribute	Type or value
`layout`	`free\|row\|column`
`reveal`	`boolean`

Slots and children

Slot or child	What goes in
`default`	deck-node, deck-group, deck-lane, and deck-edge children

Example

<deck-graph layout="row">
  <deck-node id="source" label="Brief"></deck-node>
  <deck-edge from="source" to="proof" label="check"></deck-edge>
  <deck-node id="proof" label="Verified deck" boxed tone="ok"></deck-node>
</deck-graph>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-graph-edgeVisual value used by the named part
Value for --deck-graph-edge
--deck-graph-edge-widthWidth of the named element
Value for --deck-graph-edge-width
--deck-graph-edge-labelVisual value used by the named part
Value for --deck-graph-edge-label
--deck-graph-ratioVisual value used by the named part
Value for --deck-graph-ratio
--deck-node-colorColor of the named element
Value for --deck-node-color
--deck-node-ruleDivider color or complete divider value
Value for --deck-node-rule
--deck-node-sizeSize of the named element
Value for --deck-node-size
--deck-node-bgBackground color or paint
Value for --deck-node-bg
--deck-node-active-colorColor of the named element
Value for --deck-node-active-color
--deck-group-borderBorder color or complete border value
Value for --deck-group-border
--deck-group-bgBackground color or paint
Value for --deck-group-bg
--deck-lane-ruleDivider color or complete divider value
Value for --deck-lane-rule

Show an override example

deck-graph {
  --deck-graph-edge: #f07020;
  --deck-graph-edge-width: 2rem;
}

`<deck-node>`

One node of a graph · placed by the layout, or by an explicit position.

Attributes

Attribute	Type	Notes
`at`	`x,y percent`	Position in the drawing area · ignored under a row or column layout
`label`	`string`
`note`	`string`	Mono micro-label under the name · a protocol, a count, a latency
`width`	`CSS width`	Wrap a long label before it collides with its neighbour
`boxed`	`boolean`	Draw the node as a filled block rather than type under a rule
`tone`	`accent \| ok \| warn \| danger`	Fill color of a boxed node
`icon`	`icon name`	Glyph above the label · needs dist/deck-icon.js loaded too

Example

<deck-graph layout="row">
  <deck-node id="source" label="Brief"></deck-node>
  <deck-node id="proof" label="Verified deck" boxed tone="ok"></deck-node>
</deck-graph>

`<deck-edge>`

One edge of a graph · joins two nodes by their id.

Attributes

Attribute	Type	Notes
`from`	`node id`
`to`	`node id`
`label`	`string`	Caption drawn on the edge
`dashed`	`boolean`
`route`	`straight \| ortho`	ortho turns at right angles instead of cutting across
`label-offset`	`x,y`	Pixel offset for the label when it collides with a node

Example

<deck-graph layout="row">
  <deck-node id="source" label="Brief"></deck-node>
  <deck-edge from="source" to="proof" label="check"></deck-edge>
  <deck-node id="proof" label="Verified deck"></deck-node>
</deck-graph>

`<deck-group>`

A labelled frame drawn behind a set of nodes · for a boundary or a subsystem.

Attributes

Attribute	Type	Notes
`at`	`x,y,width,height percent`	Position and size of the frame in the drawing area
`label`	`string`
`solid`	`boolean`	A solid outline instead of the dashed default

Example

<deck-graph>
  <deck-group at="4,10,44,70" label="Authoring" solid></deck-group>
  <deck-node at="14,40" label="Source"></deck-node>
</deck-graph>

`<deck-lane>`

A horizontal band across the graph · names a stage the nodes sitting in it belong to.

Attributes

Attribute	Type	Notes
`at`	`top,height percent`	Vertical position and height of the band in the drawing area
`label`	`string`

Example

<deck-graph>
  <deck-lane at="10,30" label="Author"></deck-lane>
  <deck-node at="20,25" label="Write"></deck-node>
</deck-graph>

`<deck-icon>`

Consistent icon slot or named glyph from the bundled icon set.

Module

rikiki/dist/deck-icon.js

Attributes

Attribute	Type or value
`name`	`icon name`
`size`	`sm\|md\|lg\|xl`
`tone`	`default\|accent\|ok\|warn\|danger\|info\|muted`
`label`	`accessible label`

Slots and children

Slot or child	What goes in
`default`	custom SVG used when name is absent or unknown

Example

<deck-icon name="check" size="lg" tone="ok" label="Ready"></deck-icon>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-icon-sizeSize of the named element
Value for --deck-icon-size
--deck-icon-colorColor of the named element
Value for --deck-icon-color
--deck-icon-strokeVisual value used by the named part
Value for --deck-icon-stroke

Show an override example

deck-icon {
  --deck-icon-size: 2rem;
  --deck-icon-color: #f07020;
}

`<deck-kpi-grid>`

Aligned KPI figures with optional rules between the values.

Module

rikiki/dist/deck-kpi-grid.js

Attributes

Attribute	Type or value
`cols`	`number/string`
`ruled`	`boolean`

Slots and children

Slot or child	What goes in
`default`	deck-kpi children; deck-kpi default slot accepts supporting text

Example

<deck-kpi-grid cols="3" ruled>
  <deck-kpi value="0" label="CDNs" tone="ok">
    Runtime requests
  </deck-kpi>
  <deck-kpi value="20" label="slides"></deck-kpi>
</deck-kpi-grid>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-kpi-grid-gapSpacing between items
Value for --deck-kpi-grid-gap
--deck-kpi-grid-colsGrid column template
Value for --deck-kpi-grid-cols
--deck-kpi-grid-ruleDivider color or complete divider value
Value for --deck-kpi-grid-rule
--deck-kpi-value-sizeSize of the named element
Value for --deck-kpi-value-size
--deck-kpi-value-colorColor of the named element
Value for --deck-kpi-value-color
--deck-kpi-label-colorColor of the named element
Value for --deck-kpi-label-color
--deck-kpi-note-colorColor of the named element
Value for --deck-kpi-note-color

Show an override example

deck-kpi-grid {
  --deck-kpi-grid-gap: 1.5rem;
  --deck-kpi-grid-cols: #f07020;
}

`<deck-kpi>`

One figure of a KPI grid · the value, what it measures, and an optional qualifier.

Attributes

Attribute	Type	Notes
`value`	`string`	The figure itself
`label`	`string`	What the figure measures
`note`	`string`	Qualifier under the label
`tone`	`default \| accent \| ok \| warn \| danger \| muted`

Slots

Slot	What goes in
`(default)`	Supporting text under the figure

Example

<deck-kpi-grid cols="3" ruled>
  <deck-kpi value="0" label="CDNs" tone="ok">Runtime requests</deck-kpi>
  <deck-kpi value="20" label="slides"></deck-kpi>
</deck-kpi-grid>

`<deck-persona>`

Audience or user framing block with avatar, name, role, organisation, and context.

Module

rikiki/dist/deck-persona.js

Attributes

Attribute	Type or value
`name`	`string`
`person-role`	`string`
`org`	`string`
`context`	`string`
`src`	`image URL`
`on-dark`	`boolean`
`compact`	`boolean`
`inline`	`boolean`

Slots and children

Slot or child	What goes in
`default`	additional context content

Example

<deck-persona name="Alex" person-role="Staff engineer" org="Siliceum" context="Needs a deck that survives handover"></deck-persona>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-persona-avatar-sizeSize of the named element
Value for --deck-persona-avatar-size
--deck-persona-initials-colorColor of the named element
Value for --deck-persona-initials-color
--deck-persona-ruleDivider color or complete divider value
Value for --deck-persona-rule
--deck-persona-name-colorColor of the named element
Value for --deck-persona-name-color
--deck-persona-role-colorColor of the named element
Value for --deck-persona-role-color
--deck-persona-context-colorColor of the named element
Value for --deck-persona-context-color
--deck-persona-gapSpacing between items
Value for --deck-persona-gap
--deck-persona-compact-name-sizeSize of the named element
Value for --deck-persona-compact-name-size

Show an override example

deck-persona {
  --deck-persona-avatar-size: 2rem;
  --deck-persona-initials-color: #f07020;
}

`<deck-pull>`

Large pull quote that can occupy the full width or float to one side.

Module

rikiki/dist/deck-pull.js

Attributes

Attribute	Type or value
`side`	`left\|right\|full`

Slots and children

Slot or child	What goes in
`default`	quoted text or slotted HTML

Example

<deck-pull side="left">The source stays readable after delivery.</deck-pull>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-pull-colorColor of the named element
Value for --deck-pull-color
--deck-pull-sizeSize of the named element
Value for --deck-pull-size
--deck-pull-ruleDivider color or complete divider value
Value for --deck-pull-rule
--deck-pull-rule-widthDivider thickness
Value for --deck-pull-rule-width
--deck-pull-bgBackground color or paint
Value for --deck-pull-bg
--deck-pull-paddingInner spacing
Value for --deck-pull-padding
--deck-pull-widthWidth of the named element
Value for --deck-pull-width

Show an override example

deck-pull {
  --deck-pull-color: #f07020;
  --deck-pull-size: 2rem;
}

`<deck-quote>`

Attributed quote with controlled mark, size, contrast, and author role.

Module

rikiki/dist/deck-quote.js

Attributes

Attribute	Type or value
`author`	`string`
`author-role`	`string`
`size`	`lead\|big\|mega`
`plain`	`boolean`
`on-dark`	`boolean`
`no-mark`	`boolean`

Slots and children

Slot or child	What goes in
`default`	quoted text

Example

<deck-quote author="Jane Doe" author-role="Platform lead" size="big">Make the proof part of the delivery.</deck-quote>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-quote-colorColor of the named element
Value for --deck-quote-color
--deck-quote-sizeSize of the named element
Value for --deck-quote-size
--deck-quote-mark-colorColor of the named element
Value for --deck-quote-mark-color
--deck-quote-mark-sizeSize of the named element
Value for --deck-quote-mark-size
--deck-quote-ruleDivider color or complete divider value
Value for --deck-quote-rule
--deck-quote-rule-widthDivider thickness
Value for --deck-quote-rule-width
--deck-quote-gapSpacing between items
Value for --deck-quote-gap
--deck-quote-author-colorColor of the named element
Value for --deck-quote-author-color
--deck-quote-role-colorColor of the named element
Value for --deck-quote-role-color
--deck-quote-max-widthWidth of the named element
Value for --deck-quote-max-width

Show an override example

deck-quote {
  --deck-quote-color: #f07020;
  --deck-quote-size: 2rem;
}

`<deck-table>`

Progressive table wrapper that highlights rows or columns as steps advance.

Module

rikiki/dist/deck-table.js

Attributes

Attribute	Type or value
`highlight-rows`	`comma-separated row numbers`
`highlight-cols`	`comma-separated column numbers`
`reveal`	`boolean`

Slots and children

Slot or child	What goes in
`default`	one table element

Example

<deck-table highlight-rows="2,4" reveal>
  <table>
    <thead>
      <tr><th>Check</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr><td>Runtime</td><td>Pass</td></tr>
      <tr><td>Offline bundle</td><td>Pass</td></tr>
    </tbody>
  </table>
</deck-table>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-table-mark-bgBackground color or paint
Value for --deck-table-mark-bg
--deck-table-mark-colorColor of the named element
Value for --deck-table-mark-color
--deck-table-pending-opacityOpacity
Value for --deck-table-pending-opacity

Show an override example

deck-table {
  --deck-table-mark-bg: #f07020;
  --deck-table-mark-color: #f07020;
}

`<deck-timeline>`

Chronological milestone track with row or column direction and progressive reveal.

Module

rikiki/dist/deck-timeline.js

Attributes

Attribute	Type or value
`direction`	`row\|column`
`alternate`	`row only, milestones above and below the axis`
`reveal`	`boolean`

Slots and children

Slot or child	What goes in
`default`	deck-milestone children

Example

<deck-timeline direction="row">
  <deck-milestone date="Now" label="Source" tone="accent">
    Write the brief
  </deck-milestone>
  <deck-milestone date="Next" label="Proof">
    Run the checks
  </deck-milestone>
</deck-timeline>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-timeline-axisVisual value used by the named part
Value for --deck-timeline-axis
--deck-timeline-axis-widthWidth of the named element
Value for --deck-timeline-axis-width
--deck-timeline-gapSpacing between items
Value for --deck-timeline-gap
--deck-milestone-dotVisual value used by the named part
Value for --deck-milestone-dot
--deck-milestone-dot-sizeSize of the named element
Value for --deck-milestone-dot-size
--deck-milestone-date-colorColor of the named element
Value for --deck-milestone-date-color
--deck-milestone-label-colorColor of the named element
Value for --deck-milestone-label-color
--deck-milestone-note-colorColor of the named element
Value for --deck-milestone-note-color
--deck-milestone-pending-opacityOpacity
Value for --deck-milestone-pending-opacity

Show an override example

deck-timeline {
  --deck-timeline-axis: #f07020;
  --deck-timeline-axis-width: 2rem;
}

`<deck-milestone>`

One milestone of a timeline · a date, a label, and the body text under them.

Attributes

Attribute	Type	Notes
`date`	`string`	Free text · "Now", "Q3", a real date
`label`	`string`
`note`	`string`	Qualifier under the label
`tone`	`default \| accent \| ok \| warn \| danger`

Slots

Slot	What goes in
`(default)`	The body text of the milestone

Example

<deck-timeline direction="row">
  <deck-milestone date="Now" label="Source" tone="accent">Write the brief</deck-milestone>
  <deck-milestone date="Next" label="Proof">Run the checks</deck-milestone>
</deck-timeline>

`<deck-versus>`

Two sided decision layout with a central pivot and an optional winner.

Module

rikiki/dist/deck-versus.js

Attributes

Attribute	Type or value
`pivot`	`string`
`winner`	`left\|right`
`slide`	`boolean`
`eyebrow`	`string, slide mode only`

Slots and children

Slot or child	What goes in
`left / right`	the two alternatives
`title / lead`	heading and lead paragraph, slide mode only

Example

<deck-versus pivot="OR" winner="right">
  <div slot="left">
    <h3>Source</h3>
    <p>Readable and editable.</p>
  </div>
  <div slot="right">
    <h3>Proof</h3>
    <p>Checked and deliverable.</p>
  </div>
</deck-versus>

Live preview

Customization tokens

Override these CSS custom properties on one component instance or in a shared stylesheet.

--deck-versus-gapSpacing between items
Value for --deck-versus-gap
--deck-versus-pivot-colorColor of the named element
Value for --deck-versus-pivot-color
--deck-versus-pivot-sizeSize of the named element
Value for --deck-versus-pivot-size
--deck-versus-ruleDivider color or complete divider value
Value for --deck-versus-rule
--deck-versus-winner-ruleDivider color or complete divider value
Value for --deck-versus-winner-rule
--deck-versus-loser-colorColor of the named element
Value for --deck-versus-loser-color
--deck-versus-eyebrow-colorColor of the named element
Value for --deck-versus-eyebrow-color
--deck-versus-slide-bgBackground color or paint
Value for --deck-versus-slide-bg
--deck-versus-side-alignVisual value used by the named part
Value for --deck-versus-side-align

Show an override example

deck-versus {
  --deck-versus-gap: 1.5rem;
  --deck-versus-pivot-color: #f07020;
}

Optional modules · what each module costs and how a deck imports it.
Theming · the token contract these components read.
API reference · the deck-root properties, events and extension hooks.