Custom Callout Examples

This document provides examples of custom callouts.

Document YAML

The following YAML front matter is used to define custom callouts in this document:

---
title: "Custom Callout Examples"
format: html
custom-callout:    
  todo:
    icon-symbol: "📝"
    color: "pink"
  jjb:
    icon: true
    title: "fix for JJB"
    icon-symbol: "⚠️"
    color: "#FFA500"
  test:
    title: "Test feature"
    icon: true
    color: "#801410"
  thumbs-up:
    title: "Great job!"
    icon: true
    icon-symbol: "fa-thumbs-up"
    color: "#008000"
filters:
  - custom-callout
---

Sample Custom Callouts

The following examples demonstrate the use of custom callouts in Quarto documents using the defined styles in the YAML front matter.

Original

Todo

Hello there!

fix for JJB

Please address this issue …

Test feature

Let’s do a feature test!

Great job!

Hey, a FontAwesome icon!

::: todo
Hello there!
:::

::: jjb
Please address this issue ... 
:::

::: test
Let's do a feature test!
:::

::: thumbs-up
Hey, a [FontAwesome](https://fontawesome.com/) icon!
:::

Sample Custom Callouts with Options

The following examples demonstrate the use of custom callouts with additional options.

Title

Todo with a Custom Title!

Demo of title="Todo with a Custom Title!".

::: {.todo title="Todo with a Custom Title!"}
Demo of `title="Todo with a Custom Title!"`.
:::

Icon

Todo with No Icon

Demo of icon="false".

::: {.todo icon="false" title="Todo with No Icon"}
Demo of `icon="false"`.
:::

Collapse

Demo of collapse="true".

::: {.todo collapse="true" title="Collapsed Todo with Title"}
Demo of `collapse="true"`.
:::

Appearance

Todo with Simple Appearance

Demo of appearance="simple".

Demo of appearance="simple" and collapse="true".

Todo with Minimal Appearance

Demo of appearance="minimal".

Demo of appearance="minimal" and collapse="true".

::: {.todo appearance="simple" title="Todo with Simple Appearance"}
Demo of `appearance="simple"`.
:::

::: {.todo appearance="simple" collapse="true" title="Todo with Simple Appearance and Collapse"}
Demo of `appearance="simple"` and `collapse="true"`.
:::

::: {.todo appearance="minimal" title="Todo with Minimal Appearance"}
Demo of `appearance="minimal"`.
:::

::: {.todo appearance="minimal" collapse="true" title="Todo with Minimal Appearance and Collapse"}
Demo of `appearance="minimal"` and `collapse="true"`.
:::

Original Quarto Callout

This section provides examples of the built-in Quarto Callout for a Note, e.g. .callout-note.

Note

Hello!

Note with Custom Title

Demo of title="Note with Custom Title"

Note with Title and No Icon

Demo of icon="false"

Demo of collapse="true"

Simple Note Appearance with Title

Demo of appearance="simple".

Demo of appearance="Simple" and collapse="true".

Minimal Note Appearance with Title

Demo of appearance="minimal".

Demo of appearance="minimal" and collapse="true".

::: {.callout-note}
Hello!
:::

::: {.callout-note title="Note with Custom Title"}
Demo of `title="Note with Custom Title"`
:::

::: {.callout-note icon="false" title="Note with Title and No Icon"}
Demo of `icon="false"`
:::

::: {.callout-note collapse="true" title="Collapsed Note with Title"}
Demo of `collapse="true"`
:::

::: {.callout-note appearance="simple" title="Simple Note Appearance with Title"}
Demo of `appearance="simple"`.
:::

::: {.callout-note appearance="simple" collapse="true" title="Simple Note Appearance with Title and Collapse"}
Demo of `appearance="Simple"` and `collapse="true"`.
:::

::: {.callout-note appearance="minimal" title="Minimal Note Appearance with Title"}
Demo of `appearance="minimal"`.
:::

::: {.callout-note appearance="minimal" collapse="true" title="Minimal Note Appearance with Title and Collapse"}
Demo of `appearance="minimal"` and `collapse="true"`.
:::