quarto-tricks/callout/index.qmd at main · holtzy/quarto-tricks · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
---
title: "Callout"
format:
  html:
    css: style.css
editor: visual
---

Callouts are an excellent way to draw extra attention to certain concepts, or to more clearly indicate that certain content is supplemental or applicable to only some scenarios.

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

:::{.callout-tip}
This is an example of an tip callout
:::

:::{.callout-caution}
This is an example of an caution callout
:::

:::{.callout-warning}
This is an example of an warning callout
:::

:::{.callout-important}
This is an example of an important callout
:::


<br/>

--------------------

<br/>

Note that you can also make it a bit more personal using `css`

:::{.callout-gradient}
:::{.callout-note}
This is a custom callout.

Using CSS, you can control pretty much everything.

This div is even shaking every now and then 🙃
:::
:::