Demo Report

This is a quarto document

1 Text formatting

1.1 Headings

## Level 2 heading  
### Level 3 heading  
#### Level 4 heading  
##### Level 5 heading  
###### Level 6 heading

1.2 Character sizes

Custom character sizes. This is an enchanced feature.

Markdown	Rendered
`[Largest text]{.largest}`	Largest text
`[Larger text]{.larger}`	Larger text
`[Large text]{.large}`	Large text
Normal text	Normal text
`[Small text]{.small}`	Small text
`[Smaller text]{.smaller}`	Smaller text
`[Smallest text]{.smallest}`	Smallest text

1.3 Character styles

Markdown	Rendered
`__Bold text__`	Bold text
`_Italic text_`	Italic text
`~~Strikethrough~~`	~~Strikethrough~~
`H~2~O`	H₂O
`x^2`	x^2
`--`	–
`---`	—
`[link](r-project.org)`	link
`{{< kbd Shift-Ctrl-P >}}`	Shift-Ctrl-P

1.4 Blockquote

> This is a block quote. This
> paragraph has two lines.
>
> 1. This is a list inside a block quote.
> 2. Second item.

This is a block quote. This paragraph has two lines.

This is a list inside a block quote.

Second item.

1.5 Line block

Line block preserves spaces and new lines.

| This
|     block
|          preserves
|                   formatting

This
    block
         preserves
                  formatting

1.6 Rule

A horizontal line can be created using three or more * or -.

***

1.7 Footnote

An example of footnote reference ¹

1.8 Aside

[This content lives in the right margin]{.aside}

This content lives in the right margin

1.9 Badge

Badges are defined as such:

[badge]{.badge .badge-primary} badge
[badge]{.badge .badge-secondary} badge

2 Code formatting

Verbatim code is text formatted using monospaced font intended as code. Verbatim code can be defined inline where `date()` looks like date().

Code can also be defined inside code blocks.

```
date()
```

date()

Source code, ie; code that is highlighted or executed in a quarto document is not covered here.

3 Lists

3.1 Unordered

Unordered lists are created using dashes.

- Bullet 1
- Bullet 2
  - Sub-bullet 2.1
  - Sub-bullet 2.2
- Bullet 3

Bullet 1
Bullet 2
- Sub-bullet 2.1
- Sub-bullet 2.2
Bullet 3

3.2 Ordered

Ordered lists are created using numbers.

1. Point 1
2. Point 2
3. Point 3

Point 1
Point 2
Point 3

3.3 Multiple Lists

::: {}
1. Point 1
2. Point 2
:::

:::{}
1. Point 1
2. Point 2
:::

Point 1
Point 2

Point 1
Point 2

4 Images

Images can be inserted using plain markdown or HTML directly. Plain markdown can be embellished with custom quarto adjustments to modify aspects of the image. Clicking the image opens the image in a lightbox. This is made possible using the [lightbox][https://github.com/quarto-ext/lightbox] extension.

4.1 Using Markdown

Using regular markdown.

![](assets/image.jpg)

The dimensions are based on image and/or fill up the entire available space. You can control the dimension as shown below.

![This is a caption](assets/image.jpg){width=30%}

This image above is now 30% of it’s original width.

4.1.1 Figure layout

::: {#fig-mylabel layout-ncol=2}
![Caption for figure 1](assets/image.jpg){width="40%"}

![Caption for figure 2](assets/image.jpg){width="40%"}

These figures are interesting.
:::

More figure options and layouts are described here. Cross referencing described here.

4.2 Using HTML

This image below is 30% size.
<img src="assets/image.jpg" style="width:30%;"/>

For more information on figures, see here. Images generated through code is not covered here.

5 Math expressions

Some examples of rendering equations.

$e^{i\pi} + 1 = 0$

$e^{i\pi} + 1 = 0$

$$\frac{E \times X^2 \prod I}{2+7} = 432$$

\[\frac{E \times X^2 \prod I}{2+7} = 432\]

$$\sum_{i=1}^n X_i$$

\[\sum_{i=1}^n X_i\]

$$\int_0^{2\pi} \sin x~dx$$

\[\int_0^{2\pi} \sin x~dx\]

$\left( \sum_{i=1}^{n}{i} \right)^2 = \left( \frac{n(n-1)}{2}\right)^2 = \frac{n^2(n-1)^2}{4}$

$\left( \sum_{i=1}^{n}{i} \right)^2 = \left( \frac{n(n-1)}{2}\right)^2 = \frac{n^2(n-1)^2}{4}$

$\begin{eqnarray} X & \sim & \mathrm{N}(0,1)\\ Y & \sim & \chi^2_{n-p}\\ R & \equiv & X/Y \sim t_{n-p} \end{eqnarray}$

$\begin{eqnarray} X & \sim & \mathrm{N}(0,1)\\ Y & \sim & \chi^2_{n-p}\\ R & \equiv & X/Y \sim t_{n-p} \end{eqnarray}$

$\begin{eqnarray} P(|X-\mu| > k) & = & P(|X-\mu|^2 > k^2)\\ & \leq & \frac{\mathbb{E}\left[|X-\mu|^2\right]}{k^2}\\ & \leq & \frac{\mathrm{Var}[X]}{k^2} \end{eqnarray}$

$\begin{eqnarray} P(|X-\mu| > k) & = & P(|X-\mu|^2 > k^2)\\ & \leq & \frac{\mathbb{E}\left[|X-\mu|^2\right]}{k^2}\\ & \leq & \frac{\mathrm{Var}[X]}{k^2} \end{eqnarray}$

6 Tables

For simple cases, tables can be manually created in markdown.

|speed|dist|
|-----|----|
|4    |   2|
|4    |  10|
|7    |   4|

speed	dist
4	2
4	10
7	4

Table caption and numbering can be added as such:

|speed|dist|
|-----|----|
|4    |   2|
|4    |  10|
|7    |   4|

: These are exciting results. {#tbl-mylabel}

Tab 1: These are exciting results.

speed	dist
4	2
4	10
7	4

Tables can also be generated through code which is not covered here.

6.1 Margin table

A table placed in the margin.

::: {.column-margin}

| speed | dist |
|-------|------|
| 4     | 2    |
| 4     | 10   |
| 7     | 4    |

:::

speed	dist
4	2
4	10
7	4

More information about tables.

7 Icons

7.1 Bootstrap icons

Bootstrap icons are directly available since quarto uses bootstrap for styling. Optionally, one could also use the quarto extension bsicons for more control.









7.2 Fontawesome

To use fontawesome icons as shortcodes, quarto extension fontawesome needs to be installed.

Icons can be placed using shortcodes.

{{< fa lightbulb >}}
{{< fa exclamation >}}
{{< fa clipboard-list >}}
{{< fa comments >}}
{{< fa desktop >}}
{{< fa cloud >}}
{{< fa check >}}
{{< fa times >}}
{{< fa skull >}}
{{< fa skull size=2x >}}
{{< fa brands github >}}

Icons can be displayed using the HTML  tag. Note that not all icons may work.

Here is a calendar and a couch.

Here is a calendar and a couch.

There are many other quarto extensions for icons such as academicons, iconify and lordicons.

8 Call-Outs

Call-Out blocks are explained here.

::: {.callout-note}
This is a call-out.
:::

::: {.callout-warning}
This is a call-out.
:::

::: {.callout-important}
This is a call-out.
:::

::: {.callout-tip}
This is a call-out.
:::

::: {.callout-caution}
This is a call-out.
:::

::: {.callout-tip collapse="true"}
## Call-out with collapse

This content is behind an accordion.
:::

Note

This is a call-out.

Warning

This is a call-out.

Important

This is a call-out.

Tip

This is a call-out.

Caution

This is a call-out.

Call-out with collapse

This content is behind an accordion.

9 Alerts

::: {.alert .alert-primary}
**Note:** This is an alert!
:::
::: {.alert .alert-secondary}
**Note:** This is an alert!
:::
::: {.alert .alert-success}
**Note:** This is a success alert!
:::
::: {.alert .alert-danger}
**Note:** This is a danger alert!
:::
::: {.alert .alert-warning}
**Note:** This is a warning alert!
:::
::: {.alert .alert-info}
**Note:** This is an info alert!
:::

Note: This is an alert!

Note: This is a success alert!

Note: This is a danger alert!

Note: This is a warning alert!

Note: This is an info alert!

10 Layout

10.1 Span

[Content inside span]{style="background-color: gray"}

Content inside span

10.2 Div

::: {style="background-color: gray"}
Content inside div
:::

Content inside div

Divs can be nested like this:

:::: {.class}
::: {.class}
:::
::::

Both spans and divs support attributes in this specific order: identifiers, classes, and then key-value attributes.

[Content inside span]{#id .class key1="val1" key2="val2"}

10.3 Hidden div

::: {.hidden}
Hidden content
:::

10.4 Conditional content

::: {{.content-visible when-format="html"}}
Will only appear in HTML.
:::

::: {{.content-hidden when-format="html"}}
Will not appear in HTML.
:::

Conditional content is documented here.

10.5 Inner columns

Organisation of content into columns within the body container.

:::: {.columns}
::: {.column style="background-color: aliceblue"}
Content is left.
:::
::: {.column style="background-color:  #f5b7b1"}
Content is right.
:::
::::

Content in left column.

Content in right column.

This is an example of nested columns.

:::: {.columns}

::: {.column style="background-color: aliceblue"}
Content in left column.
:::

::: {.column}
Content in right column.

:::: {.columns}
::: {.column style="background-color: #d0ece7"}
Nested left.
:::
::: {.column style="background-color: #f2d7d5"}
Nested right.
:::
::::

:::

::::

Content in left column.

Content in right column.

Nested left.

Nested right.

10.6 Outer columns

Extending content outside the body container.

::: {.column-body style="background-color: lightgray; margin-bottom:0.5em;"}
.column-body
:::

::: {.column-body-outset style="background-color: lightgray; margin-bottom:0.5em;"}
.column-body-outset
:::

::: {.column-page-inset style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page-inset
:::

::: {.column-page style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page
:::

::: {.column-screen-inset style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen-inset
:::

::: {.column-screen style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen
:::

::: {.column-body-outset-right style="background-color: lightgray; margin-bottom:0.5em;"}
.column-body-outset-right
:::

::: {.column-page-inset-right style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page-inset-right
:::

::: {.column-page-right style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page-right
:::

::: {.column-screen-inset-right style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen-inset-right
:::

::: {.column-screen-right style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen-right
:::

::: {.column-body-outset-left style="background-color: lightgray; margin-bottom:0.5em;"}
.column-body-outset-left
:::

::: {.column-page-inset-left style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page-inset-left
:::

::: {.column-page-left style="background-color: lightgray; margin-bottom:0.5em;"}
.column-page-left
:::

::: {.column-screen-inset-left style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen-inset-left
:::

::: {.column-screen-left style="background-color: lightgray; margin-bottom:0.5em;"}
.column-screen-left
:::

::: {.column-margin style="background-color: lightgray; margin-bottom:0.5em;"}
.column-margin
:::

.column-body

.column-body-outset

.column-page-inset

.column-page

.column-screen-inset

.column-screen

.column-body-outset-right

.column-page-inset-right

.column-page-right

.column-screen-inset-right

.column-screen-right

.column-body-outset-left

.column-page-inset-left

.column-page-left

.column-screen-inset-left

.column-screen-left

.column-margin

10.7 Panel layout

::: {.panel-tabset}
#### Sub topic 1

This is some material for topic 1.

#### Sub topic 2

This is some material for topic 2.

:::

Sub topic 1
Sub topic 2

This is some material for topic 1.

This is some material for topic 2.

More layout settings are described here and here.

11 General tips

Use level 2 heading as the highest level

## Section A

Add custom css under YAML if needed css: "my-theme.css"
Check out the Quarto website

Footnotes

That reference refers to this footnote.↩︎

--- title: Demo Report subtitle: Demo report code-tools: true --- This is a [quarto](https://quarto.org/) document ## Text formatting ### Headings ``` ## Level 2 heading ### Level 3 heading #### Level 4 heading ##### Level 5 heading ###### Level 6 heading ``` ### Character sizes Custom character sizes. This is an enchanced feature. |Markdown|Rendered| |---|---| |`[Largest text]{.largest}`|[Largest text]{.largest}| |`[Larger text]{.larger}`|[Larger text]{.larger}| |`[Large text]{.large}`|[Large text]{.large}| |Normal text |Normal text| |`[Small text]{.small}`|[Small text]{.small}| |`[Smaller text]{.smaller}`|[Smaller text]{.smaller}| |`[Smallest text]{.smallest}`|[Smallest text]{.smallest}| ### Character styles |Markdown|Rendered| |---|---| |`__Bold text__`|__Bold text__| |`_Italic text_`|_Italic text_| |`~~Strikethrough~~`|~~Strikethrough~~| |`H~2~O`|H~2~O| |`x^2`|x^2| |`--`|--| |`---`|---| |`[link](r-project.org)`|[link](r-project.org)| |`{{{< kbd Shift-Ctrl-P >}}}`|{{< kbd Shift-Ctrl-P >}}| ### Blockquote ``` > This is a block quote. This > paragraph has two lines. > > 1. This is a list inside a block quote. > 2. Second item. ``` > This is a block quote. This paragraph has two lines. > > 1. This is a list inside a block quote. > 2. Second item. ### Line block Line block preserves spaces and new lines. ``` | This | block | preserves | formatting ``` | This | block | preserves | formatting ### Rule A horizontal line can be created using three or more `*` or `-`. `***` ------------------------------------------------------------------------ ### Footnote An example of footnote reference [^1] [^1]: That reference refers to this footnote. ### Aside `[This content lives in the right margin]{.aside}` [This content lives in the right margin]{.aside} ### Badge Badges are defined as such: `[badge]{.badge .badge-primary}` [badge]{.badge .badge-primary} `[badge]{.badge .badge-secondary}` [badge]{.badge .badge-secondary} ## Code formatting Verbatim code is text formatted using monospaced font intended as code. Verbatim code can be defined inline where `` `date()` `` looks like `date()`. Code can also be defined inside code blocks. ```` ``` date() ``` ```` ``` date() ``` Source code, ie; code that is highlighted or executed in a quarto document is not covered here. ## Lists ### Unordered Unordered lists are created using dashes. ::: {.grid} ::: {.g-col-6} ``` - Bullet 1 - Bullet 2 - Sub-bullet 2.1 - Sub-bullet 2.2 - Bullet 3 ``` ::: ::: {.g-col-6} - Bullet 1 - Bullet 2 - Sub-bullet 2.1 - Sub-bullet 2.2 - Bullet 3 ::: ::: ### Ordered Ordered lists are created using numbers. ::: {.grid} ::: {.g-col-6} ``` 1. Point 1 2. Point 2 3. Point 3 ``` ::: ::: {.g-col-6} 1. Point 1 2. Point 2 3. Point 3 ::: ::: ### Multiple Lists ::: {.grid} ::: {.g-col-6} ``` ::: {} 1. Point 1 2. Point 2 ::: :::{} 1. Point 1 2. Point 2 ::: ``` ::: ::: {.g-col-6} ::: {} 1. Point 1 2. Point 2 ::: :::{} 1. Point 1 2. Point 2 ::: ::: ::: ## Images Images can be inserted using plain markdown or HTML directly. Plain markdown can be embellished with custom quarto adjustments to modify aspects of the image. Clicking the image opens the image in a lightbox. This is made possible using the [lightbox][https://github.com/quarto-ext/lightbox] extension. ### Using Markdown Using regular markdown. ``` ![](assets/image.jpg) ``` ![](assets/image.jpg) The dimensions are based on image and/or fill up the entire available space. You can control the dimension as shown below. ``` ![This is a caption](assets/image.jpg){width=30%} ``` ![This is a caption](assets/image.jpg){width="30%"} This image above is now 30% of it's original width. #### Figure layout ``` ::: {#fig-mylabel layout-ncol=2} ![Caption for figure 1](assets/image.jpg){width="40%"} ![Caption for figure 2](assets/image.jpg){width="40%"} These figures are interesting. ::: ``` ::: {#fig-mylabel layout-ncol="2"} ![Caption for figure 1](assets/image.jpg){width="40%"} ![Caption for figure 2](assets/image.jpg){width="40%"} These figures are interesting. ::: More figure options and layouts are described [here](https://quarto.org/docs/authoring/figures.html). Cross referencing described [here](https://quarto.org/docs/authoring/cross-references.html). ### Using HTML This image below is 30% size.\ `<img src="assets/image.jpg" style="width:30%;"/>` <img src="assets/image.jpg" style="width:30%;"/> For more information on figures, see [here](https://quarto.org/docs/authoring/figures.html). Images generated through code is not covered here. ## Math expressions Some examples of rendering equations. ::: {.grid} ::: {.g-col-6} ``` $e^{i\pi} + 1 = 0$ ``` ::: ::: {.g-col-6} $e^{i\pi} + 1 = 0$ ::: ::: ::: {.grid} ::: {.g-col-6} ``` $$\frac{E \times X^2 \prod I}{2+7} = 432$$ ``` ::: ::: {.g-col-6} $$\frac{E \times X^2 \prod I}{2+7} = 432$$ ::: ::: ::: {.grid} ::: {.g-col-6} ``` $$\sum_{i=1}^n X_i$$ ``` ::: ::: {.g-col-6} $$\sum_{i=1}^n X_i$$ ::: ::: ::: {.grid} ::: {.g-col-6} ``` $$\int_0^{2\pi} \sin x~dx$$ ``` ::: ::: {.g-col-6} $$\int_0^{2\pi} \sin x~dx$$ ::: ::: ::: {.grid} ::: {.g-col-6} ``` $\left( \sum_{i=1}^{n}{i} \right)^2 = \left( \frac{n(n-1)}{2}\right)^2 = \frac{n^2(n-1)^2}{4}$ ``` ::: ::: {.g-col-6} $\left( \sum_{i=1}^{n}{i} \right)^2 = \left( \frac{n(n-1)}{2}\right)^2 = \frac{n^2(n-1)^2}{4}$ ::: ::: ::: {.grid} ::: {.g-col-6} ``` $\begin{eqnarray} X & \sim & \mathrm{N}(0,1)\\ Y & \sim & \chi^2_{n-p}\\ R & \equiv & X/Y \sim t_{n-p} \end{eqnarray}$ ``` ::: ::: {.g-col-6} $\begin{eqnarray} X & \sim & \mathrm{N}(0,1)\\ Y & \sim & \chi^2_{n-p}\\ R & \equiv & X/Y \sim t_{n-p} \end{eqnarray}$ ::: ::: ::: {.grid} ::: {.g-col-6} ``` $\begin{eqnarray} P(|X-\mu| > k) & = & P(|X-\mu|^2 > k^2)\\ & \leq & \frac{\mathbb{E}\left[|X-\mu|^2\right]}{k^2}\\ & \leq & \frac{\mathrm{Var}[X]}{k^2} \end{eqnarray}$ ``` ::: ::: {.g-col-6} $\begin{eqnarray} P(|X-\mu| > k) & = & P(|X-\mu|^2 > k^2)\\ & \leq & \frac{\mathbb{E}\left[|X-\mu|^2\right]}{k^2}\\ & \leq & \frac{\mathrm{Var}[X]}{k^2} \end{eqnarray}$ ::: ::: ## Tables For simple cases, tables can be manually created in markdown. ::: {.grid} ::: {.g-col-7} ``` |speed|dist| |-----|----| |4 | 2| |4 | 10| |7 | 4| ``` ::: ::: {.g-col-5} | speed | dist | |-------|------| | 4 | 2 | | 4 | 10 | | 7 | 4 | ::: ::: Table caption and numbering can be added as such: ::: {.grid} ::: {.g-col-7} ``` |speed|dist| |-----|----| |4 | 2| |4 | 10| |7 | 4| : These are exciting results. {#tbl-mylabel} ``` ::: ::: {.g-col-5} | speed | dist | |-------|------| | 4 | 2 | | 4 | 10 | | 7 | 4 | : These are exciting results. {#tbl-mylabel} ::: ::: Tables can also be generated through code which is not covered here. ### Margin table A table placed in the margin. ``` ::: {.column-margin} | speed | dist | |-------|------| | 4 | 2 | | 4 | 10 | | 7 | 4 | ::: ``` ::: {.column-margin} | speed | dist | |-------|------| | 4 | 2 | | 4 | 10 | | 7 | 4 | ::: More information about [tables](https://quarto.org/docs/authoring/tables.html). ## Icons ### Bootstrap icons [Bootstrap icons](https://icons.getbootstrap.com) are directly available since quarto uses bootstrap for styling. Optionally, one could also use the quarto extension [bsicons](https://github.com/shafayetShafee/bsicons) for more control. `` `` `` `` `` `` `` ### Fontawesome To use [fontawesome](https://fontawesome.com/search?m=free) icons as shortcodes, quarto extension [fontawesome](https://github.com/quarto-ext/fontawesome) needs to be installed. Icons can be placed using shortcodes. `{{{< fa lightbulb >}}}` {{< fa lightbulb >}} `{{{< fa exclamation >}}}` {{< fa exclamation >}} `{{{< fa clipboard-list >}}}` {{< fa clipboard-list >}} `{{{< fa comments >}}}` {{< fa comments >}} `{{{< fa desktop >}}}` {{< fa desktop >}} `{{{< fa cloud >}}}` {{< fa cloud >}} `{{{< fa check >}}}` {{< fa check >}} `{{{< fa times >}}}` {{< fa times >}} `{{{< fa skull >}}}` {{< fa skull >}} `{{{< fa skull size=2x >}}}` {{< fa skull size=2x >}} `{{{< fa brands github >}}}` {{< fa brands github >}} Icons can be displayed using the HTML `` tag. Note that not all icons may work. `Here is a calendar and a couch.` Here is a calendar and a couch. There are many other quarto extensions for icons such as [academicons](https://github.com/schochastics/academicons), [iconify](https://github.com/mcanouil/quarto-iconify) and [lordicons](https://github.com/jmgirard/lordicon). ## Call-Outs Call-Out blocks are explained [here](https://quarto.org/docs/authoring/callouts.html). ``` ::: {.callout-note} This is a call-out. ::: ::: {.callout-warning} This is a call-out. ::: ::: {.callout-important} This is a call-out. ::: ::: {.callout-tip} This is a call-out. ::: ::: {.callout-caution} This is a call-out. ::: ::: {.callout-tip collapse="true"} ## Call-out with collapse This content is behind an accordion. ::: ``` ::: callout-note This is a call-out. ::: ::: callout-warning This is a call-out. ::: ::: callout-important This is a call-out. ::: ::: callout-tip This is a call-out. ::: ::: callout-caution This is a call-out. ::: ::: {.callout-tip collapse="true"} ## Call-out with collapse This content is behind an accordion. ::: ## Alerts ``` ::: {.alert .alert-primary} **Note:** This is an alert! ::: ::: {.alert .alert-secondary} **Note:** This is an alert! ::: ::: {.alert .alert-success} **Note:** This is a success alert! ::: ::: {.alert .alert-danger} **Note:** This is a danger alert! ::: ::: {.alert .alert-warning} **Note:** This is a warning alert! ::: ::: {.alert .alert-info} **Note:** This is an info alert! ::: ``` ::: {.alert .alert-primary} **Note:** This is an alert! ::: ::: {.alert .alert-secondary} **Note:** This is an alert! ::: ::: {.alert .alert-success} **Note:** This is a success alert! ::: ::: {.alert .alert-danger} **Note:** This is a danger alert! ::: ::: {.alert .alert-warning} **Note:** This is a warning alert! ::: ::: {.alert .alert-info} **Note:** This is an info alert! ::: ## Layout ### Span `[Content inside span]{style="background-color: gray"}` [Content inside span]{style="background-color: gray"} ### Div ``` ::: {style="background-color: gray"} Content inside div ::: ``` ::: {style="background-color: gray"} Content inside div ::: Divs can be nested like this: ``` :::: {.class} ::: {.class} ::: :::: ``` Both spans and divs support attributes in this specific order: identifiers, classes, and then key-value attributes. `[Content inside span]{#id .class key1="val1" key2="val2"}` ### Hidden div ``` ::: {.hidden} Hidden content ::: ``` ### Conditional content ```` ::: {{.content-visible when-format="html"}} Will only appear in HTML. ::: ```` ```` ::: {{.content-hidden when-format="html"}} Will not appear in HTML. ::: ```` Conditional content is documented [here](https://quarto.org/docs/authoring/conditional.html). ### Inner columns Organisation of content into columns within the body container. ``` :::: {.columns} ::: {.column style="background-color: aliceblue"} Content is left. ::: ::: {.column style="background-color: #f5b7b1"} Content is right. ::: :::: ``` ::: columns ::: {.column style="background-color: aliceblue"} Content in left column. ::: ::: {.column style="background-color: #f5b7b1"} Content in right column. ::: ::: This is an example of nested columns. ``` :::: {.columns} ::: {.column style="background-color: aliceblue"} Content in left column. ::: ::: {.column} Content in right column. :::: {.columns} ::: {.column style="background-color: #d0ece7"} Nested left. ::: ::: {.column style="background-color: #f2d7d5"} Nested right. ::: :::: ::: :::: ``` ::: columns ::: {.column style="background-color: aliceblue"} Content in left column. ::: ::: column Content in right column. ::: columns ::: {.column style="background-color: #d0ece7"} Nested left. ::: ::: {.column style="background-color: #f2d7d5"} Nested right. ::: ::: ::: ::: ### Outer columns Extending content outside the body container. ``` ::: {.column-body style="background-color: lightgray; margin-bottom:0.5em;"} .column-body ::: ::: {.column-body-outset style="background-color: lightgray; margin-bottom:0.5em;"} .column-body-outset ::: ::: {.column-page-inset style="background-color: lightgray; margin-bottom:0.5em;"} .column-page-inset ::: ::: {.column-page style="background-color: lightgray; margin-bottom:0.5em;"} .column-page ::: ::: {.column-screen-inset style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen-inset ::: ::: {.column-screen style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen ::: ::: {.column-body-outset-right style="background-color: lightgray; margin-bottom:0.5em;"} .column-body-outset-right ::: ::: {.column-page-inset-right style="background-color: lightgray; margin-bottom:0.5em;"} .column-page-inset-right ::: ::: {.column-page-right style="background-color: lightgray; margin-bottom:0.5em;"} .column-page-right ::: ::: {.column-screen-inset-right style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen-inset-right ::: ::: {.column-screen-right style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen-right ::: ::: {.column-body-outset-left style="background-color: lightgray; margin-bottom:0.5em;"} .column-body-outset-left ::: ::: {.column-page-inset-left style="background-color: lightgray; margin-bottom:0.5em;"} .column-page-inset-left ::: ::: {.column-page-left style="background-color: lightgray; margin-bottom:0.5em;"} .column-page-left ::: ::: {.column-screen-inset-left style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen-inset-left ::: ::: {.column-screen-left style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen-left ::: ::: {.column-margin style="background-color: lightgray; margin-bottom:0.5em;"} .column-margin ::: ``` ::: {.column-body style="background-color: lightgray; margin-bottom:0.5em;"} .column-body ::: ::: {.column-body-outset style="background-color: lightgray; margin-bottom:0.5em;"} .column-body-outset ::: ::: {.column-page-inset style="background-color: lightgray; margin-bottom:0.5em;"} .column-page-inset ::: ::: {.column-page style="background-color: lightgray; margin-bottom:0.5em;"} .column-page ::: ::: {.column-screen-inset style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen-inset ::: ::: {.column-screen style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen ::: ::: {.column-body-outset-right style="background-color: lightgray; margin-bottom:0.5em;"} .column-body-outset-right ::: ::: {.column-page-inset-right style="background-color: lightgray; margin-bottom:0.5em;"} .column-page-inset-right ::: ::: {.column-page-right style="background-color: lightgray; margin-bottom:0.5em;"} .column-page-right ::: ::: {.column-screen-inset-right style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen-inset-right ::: ::: {.column-screen-right style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen-right ::: ::: {.column-body-outset-left style="background-color: lightgray; margin-bottom:0.5em;"} .column-body-outset-left ::: ::: {.column-page-inset-left style="background-color: lightgray; margin-bottom:0.5em;"} .column-page-inset-left ::: ::: {.column-page-left style="background-color: lightgray; margin-bottom:0.5em;"} .column-page-left ::: ::: {.column-screen-inset-left style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen-inset-left ::: ::: {.column-screen-left style="background-color: lightgray; margin-bottom:0.5em;"} .column-screen-left ::: ::: {.column-margin style="background-color: lightgray; margin-bottom:0.5em;"} .column-margin ::: ### Panel layout ``` ::: {.panel-tabset} #### Sub topic 1 This is some material for topic 1. #### Sub topic 2 This is some material for topic 2. ::: ``` ::: panel-tabset #### Sub topic 1 This is some material for topic 1. #### Sub topic 2 This is some material for topic 2. ::: More layout settings are described [here](https://quarto.org/docs/authoring/article-layout.html) and [here](https://quarto.org/docs/output-formats/page-layout.html). ## General tips - Use level 2 heading as the highest level ``` ## Section A ``` - Add custom css under YAML if needed `css: "my-theme.css"` - Check out the [Quarto](https://quarto.org/) website