You can add this extension to any web-based project format (e.g. reveal-js, html) by running
Then add the filter to the list of extensions in your document header.
Value boxes
A simple value box can help make points stand out…
Or display a metric
Number of bibbles bobbled this week
Or display a metric with an icon
Number of bibbles bobbled this week
Passing title adds a small label above the value — useful when the value alone needs naming.
This week
A delta renders a small badge next to the value, e.g. a change since the last period. The arrow is inferred from a leading +/- in the text unless delta-direction is set explicitly.
This quarter
delta-color is never inferred from direction, because “up” is not always good news — a rising cost and a falling cost are both “up” or “down” depending on which one you’re looking at. Set the colour explicitly for a semantic red/green treatment:
Set href to wrap the whole box in a link — it gets a subtle hover lift/shadow (static boxes don’t wobble). Add target="_blank" to open it in a new tab; that automatically adds rel="noopener noreferrer" too.
Hover over the box below to see it lift:
While by default we left-align, you might prefer center alignment with the align parameter
Here’s a more advanced type of box with an icon and some formatting, but no value
And we can also add vertical alignment options.
We can manually override the width.
No width specified - defaults to 80% of container
Width of 30% specified.
And we can manually override the height.
Example with no height specified - it will fit the contents
If a box’s content is short (or height is set below the default floor), min-height and padding can be lowered to reclaim space — handy on busy slides.
Default min-height (100px) and padding (1.5rem)
Icons can be repositioned with the icon-position parameter. top is the default — the icon, value, and details all stay flush against the same edge for left/right alignment.
Add logging steps for arrivals, queues, resource use, and departures
Right-aligned icon
The value can be repositioned relative to the details text with the value-position parameter, completely independently of icon-position.
Left-aligned value
Right-aligned value
We can also combine this with text position using the align parameter.
Note that icon-position and value-position are independent — an icon on the left doesn’t force the value into a row with it.
Left-aligned icon with right-aligned text
Left-aligned icon AND left-aligned value, together
Wrap value boxes in .value-box-row for an equal-width, equal-height KPI strip — no more hand-rolling .columns/.column scaffolding or hand-setting height on every box to make them match. With no columns set, boxes lay out in a single non-wrapping row:
Signups this week — a longer line of detail text here to show the other boxes stretch to match its height
Open tickets
Uptime
Set shared styling attributes once on the row instead of repeating them on every box. A box that doesn’t set its own value inherits the row’s, and one that does (like the color override below) always wins.
Click here to listen to our past episodes
Click here to find out more about the HSMA programme
Click here to access our HSMA 6 content recordings, slides and sample code
::: {.value-box-row icon-position="top" color="bg-red" icon-size="2rem" width="90%" align="center"}
::: {.value-box href="https://podcast.hsma.co.uk/episodes" icon="bi bi-headphones"}
Click here to listen to our past episodes
:::
::: {.value-box href="https://hsma.co.uk" icon="fa-solid fa-chalkboard-user"}
Click here to find out more about the HSMA programme
:::
::: {.value-box href="https://hsma.co.uk/hsma_content/modules/modules.html" icon="bi bi-camera-reels" color="bg-blue"}
Click here to access our HSMA 6 content recordings, slides and sample code
:::
:::Only the third box’s color was repeated — icon-position, icon-size, width and align were each set once on the row and picked up by all three boxes.
Set columns to switch to a grid: extra boxes wrap onto further rows once it’s full, with every row — not just each one individually — kept the same height.
Wins this season — a much longer line of detail text, to show every row in the grid stretches to match the tallest box anywhere in it
Wins
Wins
Wins
Wins
Wins
::: {.value-box-row columns="3"}
::: {.value-box value="12" color="bg-blue" title="Team A"}
Wins this season
:::
::: {.value-box value="9" color="bg-purple" title="Team B"}
Wins
:::
::: {.value-box value="15" color="bg-red" title="Team C"}
Wins
:::
::: {.value-box value="7" color="bg-olive" title="Team D"}
Wins
:::
::: {.value-box value="11" color="bg-slate" title="Team E"}
Wins
:::
::: {.value-box value="4" color="bg-pink" title="Team F"}
Wins
:::
:::Bootstrap icons
Material Symbols icons
Font Awesome icons come in different styles, selected via a class prefix. fa-solid, fa-regular, and fa-brands are all available here, via the free Font Awesome CDN this extension loads.
Filled-in icons
Outlined icons
Logos, only available in this one style
Font Awesome also has Pro-only styles — fa-light, fa-thin, and fa-duotone — which aren’t demoed here, as they require a paid Font Awesome Pro kit and this extension only loads the free CDN build.
By passing in the path to an svg or png file, you can use any image as an ‘icon’.
Local svg file
Font awesome, bootstrap icons, tabler icons, phosphor icons, and material symbols support recoloring
Bootstrap icons
Font awesome icons
Tabler icons
You can also change the color parameter. A number of predefined colours are available: bg-blue, bg-navy, bg-teal, bg-green, bg-olive, bg-amber, bg-orange, bg-red, bg-pink, bg-purple, bg-slate, bg-grey
For details on how to change or add named colours, see the advanced customisation section in the readme.
bg-blue
bg-navy
bg-teal
bg-green
bg-olive
bg-slate
bg-red
bg-orange
bg-amber
bg-purple
bg-pink
bg-grey
color also accepts a raw CSS colour value directly — no new class needed — for anything starting with #, rgb(/rgba(, hsl(/hsla(, or var(.
color=“#c8102e”
color=“rgb(200, 16, 200)”
color=“rgba(200, 16, 46, 0.3)”
color=“hsl(13 74.5% 52.4%)”
color=“hsla(13 74.5% 52.4% / 0.5)”
Quarto compiles a project’s _brand.yml palette into CSS custom properties automatically, so color can reference it with var(...) too — no manual <style> block needed. This deck ships its own _brand.yml:
color=“var(–quarto-scss-export-brand-accent)”
icon-color=“var(–quarto-scss-export-brand-accent)”
--quarto-scss-export-brand-accent names the accent palette entry directly — Quarto exports every resolved theme/brand value this way, in every format, so there’s no need to know format-internal names like reveal.js’s --r-link-color or Bootstrap’s --bs-primary.
icon-color/font-color/value-color/title-color/delta-color accept var(...) the same way.
Render once, then grep the compiled theme CSS for the --quarto-scss-export- prefix to see every brand/theme value Quarto resolved, under its own name — no need to read Quarto’s SCSS source:
revealjs: <doc>_files/libs/revealjs/dist/theme/quarto-*.csshtml/dashboard: <doc>_files/libs/bootstrap/bootstrap-*.min.cssThe semantic roles (primary, secondary, success, …) are exported the same way, as --quarto-scss-export-primary etc. Bootstrap-based formats additionally expose those same roles under Bootstrap’s own names too (--bs-primary, --bs-secondary, …), if you’d rather use those instead:
The font for the general text can be tweaked with the font-size parameter
color and delta don’t have to be typed in by hand — since a value box is just a fenced div, a code cell can compute them and print the div’s markdown straight into the document with output: asis. The box’s body is ordinary content too, so a chart can go right inside it rather than sitting next to it: Python looks at a week-over-week change here, picks red or green depending on its sign, formats the delta string, and renders a matching sparkline as a small transparent PNG, base64-encoded so it can be embedded directly with no separate image file to manage:
import base64
import io
import matplotlib.pyplot as plt
weekly_sales = [82, 88, 91, 87, 95, 101, 108]
current, previous = weekly_sales[-1], weekly_sales[-2]
change_pct = (current - previous) / previous * 100
color = "bg-green" if change_pct >= 0 else "bg-red"
delta = f"{change_pct:+.1f}%"
fig, ax = plt.subplots(figsize=(10, 0.6))
# White, not red/green: the box's own `color` already signals direction, and
# a red/green line risks near-zero contrast against a same-hue bg-* (as
# white does against every box colour, matching the value/delta/details text).
ax.plot(weekly_sales, marker="o", linewidth=2, color="white")
ax.axis("off")
fig.patch.set_alpha(0) # transparent, so it blends into the box's own colour
plt.tight_layout(pad=0)
buffer = io.BytesIO()
fig.savefig(buffer, format="png", dpi=150, transparent=True)
plt.close(fig)
sparkline_b64 = base64.b64encode(buffer.getvalue()).decode("ascii")<Figure size 960x480 with 0 Axes>#| output: asis
print(f'::: {{.value-box title="Weekly sales" value="{current}" delta="{delta}" color="{color}" width="50%"}}')
print(f'<img src="data:image/png;base64,{sparkline_b64}" alt="weekly sales trend" style="width:100%; height:auto; display:block; margin:0.4rem 0;">')
print("Colour, delta and sparkline all follow the sign of `change_pct`, computed above")
print(":::")
Colour, delta and sparkline all follow the sign of ‘change_pct’, computed on the previous slide
output: asis tells Quarto to drop the cell’s printed text straight into the document as markdown, so the f-string-built ::: {.value-box ...} block above is parsed exactly as if it had been typed by hand — <img> tag included, since the box’s body accepts any content placed inside the fence, not just plain text.
Encoding the chart as a base64 data: URI rather than saving a separate PNG keeps the whole box self-contained in the rendered page, with no extra file to stage or deploy alongside it.
Flip weekly_sales[-1] below weekly_sales[-2] and the box’s colour, its delta, and the sparkline all switch together, since they’re reading the same change_pct.
We can use them with special named fragment types like ‘fade in, then semi out’ (this is also the default if you set fragment=“true”)
Or standard fragments
Every fragment style shipped with this version of Reveal.js, one per box — advance through the slide to see each one in turn. All of them fade in on entry; the class name controls what (if anything) happens after that. See the Reveal.js docs for the full reference.
Fades in, stays visible
Starts visible, fades out
Fades in while sliding up
Fades in while sliding down
Fades in while sliding left
Fades in while sliding right
Fades in, fades out next step
Fades in, dims next step (this extension’s default)
Starts visible, dims out
Fades in while growing larger
Fades in while shrinking
Fades in while zooming from small
Fades in with a strikethrough
Not shown: highlight-red/-green/-blue and their highlight-current-* variants. Reveal.js applies these by recolouring the fragment element’s own color, but value boxes set color inline on the value/details text for contrast against color/bg-*, which overrides it — so these six have no visible effect on a value box and are unsupported here.
By using the ‘index’ parameter, we can determine the order that fragments appear by passing a number that indicates the order.
Beyond the parameters this extension defines, an #id and extra .classes pass through onto the rendered box, along with data-*/aria-* attributes and role/tabindex/lang. Anything else is left off rather than renamed to a data- attribute.
id, an extra class, ARIA attributes and a data-id (useful for revealjs auto-animate) all survive
data-id and auto-animatedata-id is what actually drives Reveal.js auto-animate: give two consecutive slides auto-animate="true" in the heading, give a value box the same data-id on both, and Reveal.js treats it as the same element and smoothly morphs its position, size and colour between them as you advance. The next two slides are that pair — present the deck (not the static preview pane) to see it animate.
New customers this quarter
New customers this quarter — up from 42 last quarter
## Auto-animate: Growth {auto-animate="true"}
::: {.value-box data-id="autoanimate-demo" value="42" width="30%" color="bg-blue" align="center"}
New customers this quarter
:::
## Auto-animate: Growth {auto-animate="true"}
::: {.value-box data-id="autoanimate-demo" value="1,284" width="90%" color="bg-green" align="left"}
New customers this quarter — up from 42 last quarter
:::The matching data-id is doing all the work here — everything else about the box (value, width, color, align) is free to differ between the two slides.
The Growth pair changed several properties at once. Auto-animate isn’t limited to any fixed list of attributes — it interpolates whatever CSS the matched element ends up with, so anything on the box that becomes a CSS property can be animated:
width, height, padding, value-font-size, min-height… a box can grow or shrinkouter-extra-style="margin-left:...;" (or any other positioning CSS)color, font-color, value-color, icon-color, delta-color*-extra-style escape hatches from the previous section, since those pass straight through to the element’s style=The next two pairs isolate shrink and movement on their own, so it’s clear which attribute is driving which part of the animation.
Year-over-year growth
YoY growth
Only value-font-size, width, padding and min-height changed between those two slides — the same headline stat condenses into a small summary tile, e.g. to make room as supporting detail appears elsewhere on the next slide of a real deck.
## Auto-animate: Headline {auto-animate="true"}
::: {.value-box data-id="shrink-demo" value="128%" value-font-size="4rem" width="70%" color="bg-purple" align="center"}
Year-over-year growth
:::
## Auto-animate: Headline {auto-animate="true"}
::: {.value-box data-id="shrink-demo" value="128%" value-font-size="1.3rem" width="20%" padding="0.5rem" min-height="40px" color="bg-purple" align="center"}
YoY growth
:::Days until launch
Days until launch
Here only outer-extra-style and icon changed — same size, same colour, same value, just a different margin-left — so the box visibly slides across the slide with nothing else moving.
## Auto-animate: Focus {auto-animate="true"}
::: {.value-box data-id="movement-demo" value="7" width="35%" color="bg-amber" icon="fa-solid fa-clock" icon-position="left"}
Days until launch
:::
## Auto-animate: Focus {auto-animate="true"}
::: {.value-box data-id="movement-demo" outer-extra-style="margin-left:60%;" value="7" width="35%" color="bg-amber" icon="fa-solid fa-rocket" icon-position="left"}
Days until launch
:::