Callouts are an excellent way to draw attention to certain concepts, or to more clearly indicate that certain content is supplemental or applicable to only some scenarios.
Source: [Quarto - Callout Blocks](https://quarto.org/docs/authoring/callouts.html)
### Callout Types
There are five different types of callouts available:
- `note`
- `warning`
- `important`
- `tip`
- `caution`
The color and icon will be different depending upon the type that you select.
### Markdown Syntax
Create callouts in markdown using the following syntax (note that the first markdown heading used within the callout is used as the callout heading):
```
:::{.callout-note}
There are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::
:::{.callout-warning}
## Warning
This is an example of a Warning Callout.
:::
:::{.callout-important}
## Important
This is an example of a Important callout.
:::
:::{.callout-tip}
## Tip With Caption
This is an example of a callout with a caption.
:::
:::{.callout-caution collapse="true"}
## Caution Callout. 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.
:::
```
### Customizing Appearance
#### Collapse
You can create ‘folded’ callouts that can be expanded by the user by settings the `collapse` attribute on the callout.
If you set `collapse=true`, the callout will be expandable, but will be collapsed by default.
If you set `collapse=false`, the callout will be expanded, but will be expanded by default.
### Appearance
Callouts have 3 different looks you can use:
`default` - The default appearance with colored header and an icon.
`simple` - A lighter weight appearance that doesn’t include a colored header background.
`minimal` - A minimal treatment that applies borders to the callout, but doesn’t include a header background color or icon.
You can set the callout appearance either globally in the document (or project yaml):
```
callout-appearance: simple
```
or by setting the `type` attribute on the callout. For example
```
::: {.callout-note appearance="simple"}
## Pay Attention
Using callouts is an effective way to highlight content that your reader give special consideration or attention.
:::
```
### Fenced Div Blocks
Use Fence Divs to organize components on page. Similar to html <div>. Use over <div> because not limited to HTML/CSS concepts. Must have a pair of ':::' , can be more. Can nest.
```
:::: columns
::: {.column width="50%"}
### R Markdown
```yaml
title: "My Document"
output:
html_document:
toc: true
number_sections: true
css: styles.css
```
:::
::: {.column width="50%"}
### Quarto
```yaml
title: "My Document"
format:
html:
toc: true
number-sections: true
css: styles.css
```
:::
::::
.big-text {
font-size: 120px;
}
::: {.big-text}
A paragraph with big text.
:::
### Tabsets
Split up and flip between sections of a page, alternative to just two columns
```
::: {.panel-tabset}
## Element 1
## Element 2
:::
```
```
figure layout
::: {layout-ncol=2}
::: {layout-nrow=3}
::: {layout="[[70,30],[100]]"}
::: {layout="[[40,-20,40]], [[100]]"}
:::
### Spans
Special - This is text with [special]{style="color:red;"} formatting. [text]{.class} similar to <span ,class>Text</span>
Span for specific words
[span]{.class}
::: {layout-ncol=2}
image1
image2
:::
### Tabset
Split up and flip between sections of a page, alternative to just two columns
```
::: {.panel-tabset}
## Element 1
## Element 2
:::
```
## Tabsets
::: {.panel-tabset}
## Code
```{r}
#| echo: fenced
#| eval: false
head(mtcars)
```
## Output
```{r}
#| eval: true
#| echo: false
head(mtcars)
```
:::
## Tabsets
````
::: {.panel-tabset}
## Code
```{{r}}
#| echo: fenced
#| eval: false
head(mtcars)
```
## Output
```{{r}}
#| eval: true
#| echo: false
head(mtcars)
```
:::
::: {.panel-tabset}
## Code
```{r}
#| echo: fenced
#| eval: false
head(mtcars)
```
## Output
```
#| eval: true
#| echo: false
head(mtcars)
```
:::
### Icons
In addition to controlling the appearance of the callout, you can also choose to directly suppress the icon by setting the global option in your document (or project) yaml:
```
callout-icon: false;
```
or by setting an attribute directly on the callout:
```
::: {.callout-note icon=false}
## Pay Attention
Using callouts is an effective way to highlight content that your reader give special consideration or attention.
:::
```
## Format Support
The following formats render callouts discussed above:
- HTML
- PDF
- MS Word
- EPUB
Note that callout rendering for HTML is not available when you disable the standard HTML theme (e.g. if you specify the `theme: none` option).
When the target format doesn’t support callouts, they are rendered as a simple blockquote with the caption in bold.
***
2023 cloudedknowledge.net