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
Hello there!
Please address this issue …
Let’s do a feature test!
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
Demo of title="Todo with a Custom Title!".
Demo of title defined as a markdown header in content.
::: {.todo title="Todo with a Custom Title!"}
Demo of `title="Todo with a Custom Title!"`.
:::
::: {.todo}
## Todo with Title Defined in Content
Demo of `title` defined as a markdown header in content.
:::Icon
::: {.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
Demo of appearance="simple".
Demo of appearance="simple" 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.
Hello!
Demo of title="Note with Custom Title"
Demo of title defined as a markdown header in content.
Demo of collapse="true"
Demo of appearance="simple".
Demo of appearance="Simple" and collapse="true".
::: {.callout-note}
Hello!
:::
::: {.callout-note title="Note with Custom Title"}
Demo of `title="Note with Custom Title"`
:::
::: {.callout-note}
## Note with Title Defined in Content
Demo of `title` defined as a markdown header in content.
:::
::: {.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"`.
:::