6.16 Callouts

There are five different types of callouts available.

• note (blue)
• tip (green)
• important (red)
• warning (amber 比 caution 更亮眼 vivid )
• caution (orange)

The color and icon will be different depending upon the type that you select.

::: {.callout-note}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::

::: {.callout-tip}
## Tip with Title

This is an example of a callout with a title.
:::

::: {.callout-caution collapse="true"}
## Expand To Learn About Collapse

This is an example of a 'folded' caution callout that can be expanded by the user. You can use `collapse="true"` to collapse it by default or `collapse="false"` to make a collapsible callout that is expanded by default.
:::

Here are what the various types look like in HTML output:

• Callout heading can be defined using

  • title = "Heading" in the callout header, or

  • ## Heading in the callout body

    It can be any level of heading.

• icon = false to disable the icon in the callout.
• To cross-reference a callout, add an ID attribute that starts with the appropriate callout prefix, e.g., #nte-xxx. You can then reference the callout using the usual @nte-xxx syntax.
• appearance = "default" | "simple" | "minimal"

  • default: to use the default appearance with a background color and border.

  • simple: to remove the background color, but keep the border and icon.

  • minimal: A minimal treatment that applies borders to the callout, but doesn’t include a header background color or icon.

    appearance="minimal" is equivalent to appearance = "simple" icon = false in the callout header.

You can style callouts using CSS. For example, the change font size and alignment of text, you can use the following CSS:

::: {.callout-important appearance="minimal"}
## Research Question

<center style="font-size: 1.5em; font-weight: bold;">
Does expenditure per student affect student performance \
in elementary school education?
</center>
:::

6.16.1 Nested Callouts

You can nest callouts within other callouts. For example:

::: {.callout-warning}
## Warning with Nested Callout
This is an example of a warning callout that contains a nested note callout.

::: {.callout-note}
This is a nested note callout.
:::

:::

Note that you need to put a blank line before and after the nested callout to ensure proper rendering.

6.16.2 Cross-reference Callouts

To cross-reference a callout, add an ID attribute that starts with the appropriate callout prefix (see Table blow). You can then reference the callout using the usual @ syntax. For example, here we add the ID #tip-example to the callout, and then refer back to it:

::: {#tip-example .callout-tip}
## Cross-Referencing a Tip
Add an ID starting with `#tip-` to reference a tip.
:::
See @tip-example...

• Note that the ID attribute must come first, before the class attribute.

  This follows the general rule for Divs and Spans that IDs must come before classes.

The prefixes for each type of callout are:

Prefixes for callout cross-references

Callout Type	Prefix
note	#nte-
—	—
tip	#tip-
warning	#wrn-
important	#imp-
caution	#cau-

Cross-referencing callouts is currently only supported for HTML, PDF and MS Word.

---