Callout Boxes - epi-workbench/EWBTemplates GitHub Wiki

This document is a reference for writing and formatting callout boxes in EWB exercises.

  • Use callout boxes to break up content and highlight important points
  • Types include: note, tip, check, and danger
  • Use them to share side notes, tips, answers, or warnings
  • Add a dash (-) to make the callout collapsible (e.g., [!check]-)

Stay consistent across lessons to ensure a polished, learner-friendly experience.

Page Contents

Using Callout Boxes

Use callout boxes to break up dense content, draw attention to specific points, or guide learners through key insights. Keep callout box usage and formatting consistent across lessons to maintain readability and cohesion. Each callout type serves a different instructional purpose. Below are examples and guidelines for when to use each one.

When and which callout boxes to use:

Type Use for…
note Use note callouts to highlight additional, supporting information that may be useful but is not essential for completing the task.
tip Use tip callouts to offer shortcuts, best practices, or ideas for exploration that can help learners work more efficiently or go beyond the core lesson.
check Use check callouts to present answers to quick questions embedded in the lesson. These are often paired with code blocks or brief reflections. They can be collapsible to give learners a chance to think before viewing the answer.
danger Use danger callouts to flag warnings, limitations, or common mistakes that learners should avoid. This is the most visually intense callout, so use it sparingly and only for critical information.

Avoid callouts for:

  • Restating what’s already in the text.

  • Styling alone (e.g., emphasis without substance).

Titles: When, What, and How

When to include a title:

  • When the callout is long

  • When the callout is collapsible

  • When the callout stands alone from nearby content

How to write titles:

  • Use short, descriptive titles that set expectations

  • Use Title Case for clarity

  • Do not bold the title—it renders bold automatically

Bullet Use in Callout Boxes

  • Use bullets when there are multiple distinct points or paragraphs

  • Do not use bullets for a single-sentence callout

  • Keep bullets concise and parallel

✅ Good Example:

> [!note]- Note - About `warn.conflicts`
> - The setting the value of the `warn.conflicts` argument in the `library()` function to `FALSE` suppresses messages about function name conflicts when loading a package.
> - This setting is **optional** — use it if you prefer a cleaner console without those warnings.

When to Make Callout Boxes Collapsible

Use collapsible callouts when:

  • The content includes an answer, spoiler, or solution

  • The content is helpful but optional (e.g., deeper theory or alternate methods)

  • You want to reduce visual clutter

Add a dash after the callout type to make it collapsible:

> [!check]- Answer
> Here is the answer...

Avoid collapsible callouts when:

  • The content is short and essential

  • Learners must see the message to proceed

Top

Callout Box Examples

Note

> [!note] Note - Installing Packages
> If working locally, we can install packages using `install.packages("package-name")` in the R console.

"Screenshot of the note callout box"

Tip

> [!tip] Tip - Printing Data Frames
> Try also running: `print(form_20)`

"Screenshot of the tip callout box"

Check (Collapsible)

[!IMPORTANT]

  • We are no longer using collapsible check boxes for quick checks.
  • We use embedded quiz questions instead.
  • Additionally, they should be titled "Check on Learning" instead of "Quick Check".
Let’s take a look at the data frame. Run the code below. How many rows and columns do you see?

```{r}
print(mtcars)
```

> [!check]- Check
> The data frame should contain 32 rows and 11 columns.

"Screenshot of the check callout box - collapsed"

"Screenshot of the check callout box - expanded"

## ✅ Quick check

How many rows and columns does the `alc_2` data frame have?

> [!check]- Click to Show the Answer
> The `alc_2` data frame should contain 20 rows and 19 columns.

"Screenshot of the Click to Show callout box - collapsed"

"Screenshot of the Click to Show callout box - expanded"

Danger

> [!danger] Danger 
> By definition, all columns in a data frame must have the same length (i.e., number of rows)...

"Screenshot of the danger callout box"

Quotes

To create a basic block quote, the typical > quote syntax won't work. Instead, we will need to type:

In their book [ModernDive](https://moderndive.com/1-getting-started.html#packages), Ismay and Kim offer this analogy:

> [!quote] 
> A good analogy for R packages is they are like apps you can download onto a mobile phone. So R is like a new mobile phone: while it has a certain amount of features when you use it for the first time, it doesn’t have everything. R packages are like the apps you can download onto your phone from Apple’s App Store or Android’s Google Play.

"Screenshot of a block quote"

Top