18 Callouts

18.1 Basic Syntax

Callouts are created using a fenced div block starting with ::::.

:::: {.callout type="blue" title="My First Callout"}

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

::::

My First Callout

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

Important: Always leave a blank line after the opening :::: {....} line and before the final closing :::: line.

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!

18.2 Attribute Reference

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", "fas fa-rocket"
collapsible No Makes the callout a dropdown. "true", "false" (default)
center_title No Centers the title (static callouts only). "true", "false" (default)

18.3 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.

18.4 Examples

Here are some practical examples you can copy and adapt.

18.4.1 Example 1: Informational Note

A subtle blue callout for providing information.

:::: {.callout type="blue" title="Information" style="subtle"}

This is a blue informational callout using the Subtle styling.
The default icon for 'blue' will be used.

::::

Information

This is a blue informational callout using the Subtle styling. The default icon for ‘blue’ will be used.

18.4.2 Example 2: Collapsible “Plain” Answer Box

A minimal dropdown, perfect for hiding answers to questions.

:::: {.callout type="green" style="plain" title="What is the answer?" icon="fas fa-question-circle" collapsible="true"}

The answer is revealed here. This plain dropdown uses a green icon because we set `type="green"`.

::::
   What is the answer?

The answer is revealed here. This plain dropdown uses a green icon because we set type="green".

18.4.3 Example 3: Important Red Warning

A high-visibility static callout for critical information.

:::: {.callout type="red" style="important" title="CRITICAL WARNING" icon="fas fa-triangle-exclamation"}

System integrity is compromised. Immediate action required.
Please check the `error_log.txt` file for details.

::::

CRITICAL WARNING

System integrity is compromised. Immediate action required. Please check the error_log.txt file for details.

18.4.4 Example 4: Comprehensive Dropdown

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="orange" 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.

18.5 Nesting Callouts

You can nest callouts inside other elements, such as lists, by indenting the entire callout block.

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

18.5.1 Example of a Nested Callout

1.  This is the first item in the list.

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

    :::: {.callout type="blue" 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.