Containers

Panels, cards, highlights, and the executive summary.

Worked examples of the container divs, including the two ways a card gets a footer and the parts that behave differently in Typst output.

A container is a fenced div with a class. The Reference lists the classes and their attributes. This page shows the source, and the behaviour the reference tables cannot carry.

Several of these containers behave differently in Typst output. Each difference is marked below.

Panel

A panel is a bordered region with an optional header.

::: {.panel title="A panel" style="accent"}

The body of the panel.

:::

An icon attribute puts a symbol before the title. It takes any text, and it is drawn as written.

The reference lists ten theme names for style, and a panel draws nine of them.

HTML and a Reveal.js deck style every name except neutral, which gives the plain panel. Typst styles every name except neutral and caution, and draws both as the subtle panel.

So neutral is unthemed everywhere, and caution differs between the two. Avoid both in a document rendered to more than one format.

The title comes from the first heading

A panel with no title attribute takes its title from the first heading inside it, and that heading is removed from the body.

::: {.panel style="info"}

## Method

The heading above becomes the panel title.

:::

Card

A card is a titled box.

::: {.card style="outlined"}

## Coverage

Ninety-nine per cent of lines are covered.

:::

style takes subtle, outlined, or filled.

colour takes a hex code or a colour name, and it is honoured in both HTML and Typst output. In HTML it becomes the --card-accent custom property.

Important

A card takes its title from a heading in every format. The title attribute works in HTML and in a Reveal.js deck, and Typst ignores it: the Typst card reads the first heading and nothing else.

Write the heading form, as above, for a card that has to render in both. A card that carries a title attribute and a heading takes the heading in Typst and the attribute in HTML, so the two outputs disagree.

The two ways to give a card a footer

A card footer can be written as a horizontal rule. Everything after the rule becomes the footer:

::: {.card}

## Release

The body of the card.

---

Published on 1 March.

:::

It can also be written as an explicit div:

::: {.card}

## Release

The body of the card.

::: {.card-footer}

Published on 1 March.

:::

:::

Important

The two forms are equivalent in HTML and in a Reveal.js deck only. Typst splits the body from the footer on the horizontal rule alone, so a .card-footer div is rendered as part of the body there.

Use the horizontal rule for a card that has to render in both.

Card grid

A card grid lays cards out in columns.

::: {.card-grid columns="2"}

::: {.card}

## First

The first card.

:::

::: {.card}

## Second

The second card.

:::

:::

A card inside a grid is rendered by the grid itself, not on its own.

The default number of columns depends on the format

columns defaults to 3 in HTML output and to 2 in a Reveal.js deck, because two cards fill a slide better than three. The reference gives 3, which is the value the schema declares and the value HTML uses. Write columns when a deck and a page must match.

Highlight

A highlight block emphasises a passage.

::: {.highlight}

The sentence that matters most.

:::

It takes no attributes. In Typst output it is wrapped in a template function. In HTML it is styled by the stylesheet alone, so it carries no generated markup of its own.

Executive summary

An executive summary is a titled block with decorative corner brackets.

::: {.executive-summary}

Three sentences on what the report found.

:::

show-corner-brackets removes the brackets, and it is read as a boolean, so false and False both work:

::: {.executive-summary title="In brief" show-corner-brackets="false"}

Three sentences on what the report found.

:::