19 Callouts

19.1 Callout generator

Want to skip all the technical stuff? Use the widget below to create your callouts instantly.

Callout generator

19.2 About callouts

What’s a callout?

This is a callout! So is the Callout Generator above - that one has a different type, style, and is collapsible. You can customize callouts in many different ways.

The content area inside a callout is standard Markdown. You can include:

  • Paragraphs and line breaks
  • Bulleted (-) or numbered (1.) lists
  • Bold and italic text
  • inline code
  • Fenced code blocks
  • Links and images
  • Even other nested callouts!

Callouts are created using a custom code block using the following syntax. Options are listed in the sections below. Note that there must be a blank line after the opening :::: {....} line and before the final closing :::: line.

:::: {.callout <options>}

This is the content of the callout. You can write any Markdown here.

::::

19.3 Callout options

Customize each callout by adding attributes inside the curly braces {}.

Attribute Required? Description Example Values
type Yes Sets the color scheme. "red", "blue", "green", "yellow", "purple", "orange", "gray"
style No Defines the visual style. "regular" (default), "important", "subtle", "plain"
title No Text for the callout’s title. Can include Markdown. "Important Note!", "**Action Required**"
icon No Controls the icon next to the title. "true" (default), "false", or any free FontAwesome icon class (e.g., "fas fa-lightbulb")
collapsible No Makes the callout a dropdown. "true" (default), "false"
center_title No Centers the title (static callouts only). "true", "false" (default)

19.4 Default icons

If you set icon="true" or omit the icon attribute, a default icon will be shown based on the type you’ve chosen. Here are the defaults:

type (Color) Default Icon Icon Class (fas fa-...)
red triangle-exclamation
blue circle-info
green circle-check
yellow bell
purple star
orange fire
gray comment-dots

You can override any of these defaults by specifying a different icon class, for example: icon="fas fa-lightbulb". Find more icons on the Font Awesome website.

19.5 Style examples

Note that the colors chosen below are arbitrary: colors and styles can be mixed and matched.

19.5.1 Regular

Regular, Blue

This is a blue callout with Regular styling.

Regular, Blue, Collapsible

This is a blue collapsible callout with Regular styling.

19.5.2 Important

Important, Purple

This is a purple callout with Important styling.

Important, Purple, Collapsible

This is a purple collapsible callout with Important styling.

19.5.3 Subtle

Subtle, Red

This is a red callout with Subtle styling.

Subtle, Red, Collapsible

This is a red collapsible callout with Subtle styling.

19.5.4 Plain

Plain, Orange

This is an orange callout with Plain styling.

Plain, Orange, Collapsible

This is an orange collapsible callout with Plain styling.

19.6 Indenting callouts/nesting in lists

You can nest callouts inside other elements, such as lists, by indenting the entire callout block. The option In-List Nesting Level in the Callout Generator above will do this for you.

To place a callout inside a list item or indent the callout, indent the entire :::: block (including its opening and closing fences and all of its content) by four spaces.

1.  This is the first item in the list.

2.  This is the second item, which will contain a callout.

    :::: {.callout type="green" style="subtle" title="This is an indented callout"}

    This entire callout block is indented, making it part of the second list item.

    - You can have other Markdown elements inside, like this list.
    - They must also be indented to be part of the callout.

    ::::

3.  This is the third item in the list, appearing after the callout.

  1. This is the first item in the list.

  2. This is the second item, which will contain a callout.

    This is an indented callout

    This entire callout block is indented, making it part of the second list item.

    • You can have other Markdown elements inside, like this list.
    • They must also be indented to be part of the callout.

  3. This is the third item in the list, appearing after the callout.

19.7 Advanced example

This example uses multiple attributes and contains rich Markdown content, including a fenced code block. To prevent rendering issues when nesting code blocks, use a longer fence (e.g., five colons :::::) for the outer callout block.

:::: {.callout type="gray" style="important" title="*Action Needed:* Review Workflow" icon="fas fa-clipboard-check" collapsible="true"}

### Step 1: Data Ingestion

Please ensure your data from `source_data/experiment_A.csv` has been correctly loaded.

- Check for missing values.
- Verify data types.

### Step 2: Pre-processing

The pre-processing script `scripts/01_preprocess.R` must be run before analysis.


``` r
# Example snippet from the script
# source("scripts/01_preprocess.R")
# processed_data <- preprocess_data(raw_data)
```

### Step 3: Analysis & Reporting

Confirm that the final report `output/final_report.html` has been generated.

If you encounter any issues, please refer to the *Troubleshooting Guide* section.

::::
Action Needed: Review Workflow

Step 1: Data Ingestion

Please ensure your data from source_data/experiment_A.csv has been correctly loaded.

  • Check for missing values.
  • Verify data types.

Step 2: Pre-processing

The pre-processing script scripts/01_preprocess.R must be run before analysis.

# Example snippet from the script
# source("scripts/01_preprocess.R")
# processed_data <- preprocess_data(raw_data)

Step 3: Analysis & Reporting

Confirm that the final report output/final_report.html has been generated.

If you encounter any issues, please refer to the Troubleshooting Guide section.