Reference

Every class the comic format accepts.

The complete comic vocabulary: the slide classes, the bubble divs, the fragment entrances, and how they compose.

Using the format

format: comic-revealjs

Slide classes

Written on a slide’s heading.

The slide classes.
Class	Effect
`.title-slide`	Applied to the cover for you: a diagonal red block under a halftone overlay.
`.section`	A chapter splash on a starburst. A heading written `Banner: Title` splits into a banner chip above the title.
`.panel`	A single comic panel: paper, a bold ink border, and a drop shadow.
`.action`	An action slide: skewed display text on a burst.
`.explosion`	An explosion splash: jagged star burst behind centred display text.
`.speech`	A speech-bubble slide. The tail is drawn as an SVG by the filter.
`.halftone`	Ben Day dots behind the slide. A modifier, so it composes with any of the above.

Bubble divs

The same vocabulary inside a slide, by wrapping markdown in a div. The body stays markdown, so emphasis, links, and lists work.

The bubble divs.
Class	Bubble
`.speech`	A rounded speech bubble with a tail.
`.thought`	A cloud-style thought bubble.
`.shout`	A spiky bubble, for raised voices.
`.whisper`	A soft dashed bubble, for an aside.
`.narration`	A rectangular caption box.

A bubble takes the same RevealJS classes and attributes as any other div, so a fragment applies to the whole bubble:

::: {.shout .fragment fragment-index="2"}
Stop right there!
:::

The caption div

A .caption div at the end of a slide is pinned to the slide corner:

::: {.caption}
Meanwhile, at the observatory.
:::

Every other block on a slide is wrapped in one element that the theme shrinks to fit the slide. A trailing .caption is left outside that wrapper, so it stays where it is and at its own size while the rest of the slide scales.

Callout shortcodes

Two shortcodes stamp a lettered burst onto a slide. Each emits a <div>, and each renders nothing outside RevealJS.

{{< bam >}}
{{< boom "KAPOW!" colour=blue top=10% right=8% rotate=-15 >}}

The two callout shortcodes.
Shortcode	First argument	Default colour	Shape
`bam`	The text, default `BAM!`	`yellow`	A skewed, ink-outlined burst.
`boom`	The text, default `BOOM!`	`red`	A jagged spike-burst, with the text clipped inside the star.

Both take the same attributes.

The callout attributes.
Attribute	Type	Description
`colour`	`yellow`, `red` or `blue`	Anything else falls back to the shortcode’s default colour.
`top`, `right`, `bottom`, `left`	CSS length	An offset such as `10%`, `40px` or `2em`. Giving any one of the four floats the callout over the slide.
`rotate`	number or `Ndeg`	A bare number is read as degrees.
`size`	CSS length	The callout’s font size, such as `3em`.
`fragment`	`burst`, `pop` or `splat`	Reveals the callout as a fragment with that entrance. `true`, and any value not listed here, gives `burst`; `false`, `off`, `no` and `0` leave it out of the fragment sequence.
`index`	non-negative integer	Orders the callout among the slide’s fragments.

Note

Each value is checked before it reaches the page, and one that does not fit its type is dropped rather than reported. A rotate that is not a number, a length without a unit Quarto recognises, or a negative index all leave the callout with its default instead.

Fragment entrances

Comic-themed entrances for any RevealJS fragment, combined with .fragment on a span, a list item, or a div.

The fragment entrances.
Class	Entrance
`.comic-pop`	Pops in with a quick overshoot.
`.halftone-wipe`	Wipes in behind a halftone sweep.
`.ink-splat`	Splats in like wet ink.
`.zap-highlight`	Flashes a highlight across the text.

Composing

.halftone is a modifier and combines with any slide class. A bubble sits inside any slide, including a .panel. An entrance applies to anything that can be a fragment.

Everything else in a deck, the incremental lists, the columns, the code blocks, behaves as it does in any RevealJS presentation.

Limitations

RevealJS only.
The look is opinionated by design; there are no options to tone it down short of using fewer classes.