4  Custom Callouts

This page demonstrates the use of the quarto-custom-callout extension to provide bespoke callout blocks.

• quarto-custom-callout repository
• quarto-custom-callout examples and documentation

4.1 Introduction

Quarto provides a number of built-in callout blocks, including:

Caution

The caution callout

::: { .callout-caution }
The caution callout
:::

Important

The important callout

::: { .callout-info }
The important callout
:::

Tip

The tip callout

::: { .callout-tip }
The tip callout
:::

but these do not cover all the cases we might want to use callouts for. It is possible to change the titles of these callouts, such as:

TipCustom title

The tip callout with a custom title

::: { .callout-tip title="Custom title"}
The tip callout with a custom title
:::

CautionNot the caution callout

::: { .callout-caution }
## Not the caution callout
:::

but customising the colour and icon of a callout is more difficult. The quarto-custom-callout extension allows us to make our own callouts.

4.2 Defining a new callout

To make a new callout, add a new entry in _quarto.yml in the custom-callout block with the name of the callout. For instance, to add a new case study callout, we could use the code below:

custom-callout:
  callout-case-study:
    title: "Case Study"
    icon-symbol: "🔍"
    color: "#FFA500"

and ensure that the custom-callout filter is called in _quarto.yml:

filters:
  - custom-callout

WarningCallout naming convention

We have chosen to give all of our callouts for this template the prefix callout- for continuity with the builtin callouts, and to aid with literate programming/self-documentation. Please keep to this convention when you define your own callouts.

Tip

Notice that the icon-symbol field accepts unicode icons and emojis.

4.3 Custom callouts in this template

We have defined the custom callouts below:

Callout-case-studyCase Study

For describing case studies

::: { .callout-case-study }
For describing case studies
:::

Callout-challengeChallenge

For presenting a challenge to readers

::: { .callout-challenge }
For presenting a challenge to readers
:::

Callout-dataData Analysis

For describing datasets and data analysis

::: { .callout-data }
For describing datasets and data analysis
:::

Callout-discussionDiscussion Questions:

For introducing discussion points

::: { .callout-discussion }
For introducing discussion points
:::

Callout-microbeMicrobe Profile

For summarising the properties of a microbe

::: { .callout-microbe }
For summarising the properties of a microbe
:::

Callout-questionQuestion

For presenting a single question to readers

::: { .callout-question }
For presenting a single question to readers
:::

Callout-questionsQuestions

For presenting multiple questions to readers

::: { .callout-questions }
For presenting multiple questions to readers
:::

Callout-thumbs-upGreat job!

For general encouragement

::: { .callout-thumbs-up }
For general encouragement
:::

Callout-todoCallout-todo

For highlighting where we still need to do some work

::: { .callout-todo }
For highlighting where we still need to do some work
:::