Styling Quarto Documents

Section Headers

Use # to define your section headers and sub-headers.

The more ## you have, the next level of sub-headers it will be assigned to.

# First level

## Second level

## Third level

To number your sections

---
format: 
  html/pdf:
    number-sections: true
---

A preview of how section headers look in a rendered Quarto document.

A preview of how numbered section headers look in a rendered Quarto document.

Table of Contents

If you want to include a table of contents based on your section headers…

---
format: 
  html/pdf:
    toc: true
---

A preview of how a table of contents looks in a rendered Quarto document.

You can customize with

---
toc-depth:
toc-location:
toc-title:
---

Cross references

You might want to link to a section or subsection within the same Quarto document.


Assign a section ID to the header

# First level {#section-1}

and cross reference link to the section

Visit [First level](#section-1) for instructions.

The document will then show a hyperlink to the cross-referenced section.

Columns

It can be useful to display content in columns.

::: {.columns}
::: {.column}

Content for first column.

:::
::: {.column}

Content for second column.

:::
:::

Content for first column.

Content for second column.

You might want uneven columns

::: {.columns}
::: {.column width=25%}

+ item 1
+ item 2

:::
::: {.column width=75%}

![](link-to-image.png){fig-alt="Alt text for image"}

:::
:::
  • item 1
  • item 2

{{fig-alt=“Banner for USCOTS 2023 conference slogan – communicating with / about data” width=“80%”}

or more than two columns

::: {.columns}
::: {.column width=33%}
Column 1
:::

::: {.column width=33%}
Column 2
:::

::: {.column width=33%}
Column 3
:::
:::

Column 1

Column 2

Column 3

Callouts

Using callouts can draw attention to certain text or indicate supplemental content.

::: callout-note
There are five types of callouts: note, tip, warning, caution, and important.
:::

There are five types of callouts: note, warning, important, tip, and caution.

More callouts

Here is a reminder note.

Callouts provide a simple way to attract attention, for example, to this warning.

Danger, callouts will really improve your writing.

Caption

Tip with caption.

Here is something under construction.

Callout titles

::: callout-tip
## Tip with Title

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

Tip with Title

This is an example of a callout with a title.

And collapse them!1

::: {.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.
:::

Expand To Learn About Collapse

This is an example of a ‘folded’ caution callout that can be expanded by the user.

Many more callout customization can be explored here.

Tabsets

You might want readers to toggle between content.

::: panel-tabset

## Tab 1

Content for the first tab.

## Tab 2

Content for the second tab.

:::

Content for the first tab.

Content for the second tab.

Footnotes

Footnotes can be useful for providing additional information without taking away from the existing content

Here is a footnote reference[^1]

[^1]: Here is the footnote.

Here is a footnote reference1

Alternatively,

And another^[Here is the other footnote.]

And another2

Citations

---
title: "My Document"
bibliography: references.bib
---


Blah Blah [@uscots2023]


One of the reasons I would use the visual editor!

Margins1

You might have information you want to put in the margins of a document.

::: column-margin
Content for the margin.
:::

You can place output in the margins

```{r}
#| column: margin

mtcars[1:6, 1:3]
```
                   mpg cyl disp
Mazda RX4         21.0   6  160
Mazda RX4 Wag     21.0   6  160
Datsun 710        22.8   4  108
Hornet 4 Drive    21.4   6  258
Hornet Sportabout 18.7   8  360
Valiant           18.1   6  225

Or your footnotes and citations

---
reference-location: margin
citation-location: margin
---


And so much more on article layouts.

Some of my favorite embellishments

---
embed-resources: true
code-tools: true
---

Providing students with notes or tips separate from the regular content.

USCOTS Quarto Workshop