This document demonstrates various components available in Quarto.

Heading 1 is bolded and used as the title of the page.

Heading 1

# Heading 1

Heading 2 is thined and used to introduce a new section or topic within a page.

Heading 2

## Heading 2

Heading 3 is bolded and used to introduce a new subsection or subtopic within a page.

Heading 3

### Heading 3

Headings 4, 5 and 6 are inceasing smaller and can be used as need after heading 3.

Heading 4

Heading 5

Heading 6

#### Heading 4
##### Heading 5
###### Heading 6

All heading are enforced as sentence case.

Text Formatting

Bold Text
Italic Text
~~Strikethrough~~
Inline Code

superscript² / subscript₂

**Bold Text**  
*Italic Text*  
~~Strikethrough~~  
`Inline Code`

superscript^2^ / subscript~2~

Lists

Ordered List

First item
Second item
Third item

1. First item
2. Second item
3. Third item

Unordered List

Item 1
Item 2
Item 3

- Item 1
- Item 2
- Item 3

unordered list
- sub-item 1
- sub-item 2
  - sub-sub-item 1

* unordered list
    + sub-item 1
    + sub-item 2
        - sub-sub-item 1

item 2

Continued (indent 4 spaces)

*   item 2

    Continued (indent 4 spaces)

A list which numbering

continues after

an interruption

(@)  A list which numbering

continues after

(@)  an interruption

Tasks

Task 1
Task 2

- [ ] Task 1
- [x] Task 2

Blockquotes

`>` Blockquote

This is a blockquote.
It can span multiple lines.

> This is a blockquote.  
> It can span multiple lines.

Line Block

Line Block
Spaces and newlines
are preserved

| Line Block
|   Spaces and newlines
|   are preserved

Footnotes

Here is a footnote reference,[^1] and another.[^2]

This paragraph won’t be part of the note, because it isn’t indented.

Here is an inline note.[^3]

Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote.

[^longnote]: Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they
belong to the previous footnote.

        { some.code }

    The whole paragraph can be indented, or just the first
    line. In this way, multi-paragraph footnotes work like
    multi-paragraph list items.

This paragraph won't be part of the note, because it
isn't indented.

Here is an inline note.^[Inlines notes are easier to write,
since you don't have to pick an identifier and move down to
type the note.]

Tables

Default

Header 1	Header 2	Header 3
Row 1	Data 1	Data 2
Row 2	Data 3	Data 4

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Row 1    | Data 1   | Data 2   |
| Row 2    | Data 3   | Data 4   |

Column Aligned

Default	Left	Right	Center
12	12	12	12
123	123	123	123
1	1	1	1

| Default | Left | Right | Center |
|---------|:-----|------:|:------:|
| 12      | 12   |    12 |   12   |
| 123     | 123  |   123 |  123   |
| 1       | 1    |     1 |   1    |

Pipe Format

fruit	price
apple	2.05
pear	1.37
orange	3.09

Demonstration of pipe table syntax

fruit| price
-----|-----:
apple|2.05
pear|1.37
orange|3.09

: Demonstration of pipe table syntax

Pipe Format Striped

fruit	price
apple	2.05
pear	1.37
orange	3.09

Fruit prices

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Fruit prices {.striped .hover}

Pipe Format Custom Col widths

fruit	price
apple	2.05
pear	1.37
orange	3.09

Fruit prices

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Fruit prices {tbl-colwidths="[75,25]"}

Grid Table

Sample grid table.
Fruit	Price	Advantages
Bananas	$1.34	built-in wrapper bright color
Oranges	$2.10	cures scurvy tasty

+-----------+-----------+--------------------+
| Fruit     | Price     | Advantages         |
+===========+===========+====================+
| Bananas   | $1.34     | - built-in wrapper |
|           |           | - bright color     |
+-----------+-----------+--------------------+
| Oranges   | $2.10     | - cures scurvy     |
|           |           | - tasty            |
+-----------+-----------+--------------------+

: Sample grid table.

Cross Reference

Col1	Col2	Col3
A	B	C
E	F	G
A	G	G

Table 1: My Caption

See Table 1.

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: My Caption {#tbl-letters}

See @tbl-letters.

Subtables

Col1	Col2	Col3
A	B	C
E	F	G
A	G	G

(a) First Table

Col1	Col2	Col3
A	B	C
E	F	G
A	G	G

(b) Second Table

Table 2: Main Caption

See Table 2 for details, especially Table 2 (b).

::: {#tbl-panel layout-ncol=2}
| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: First Table {#tbl-first}

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: Second Table {#tbl-second}

Main Caption
:::

See @tbl-panel for details, especially @tbl-second.

Links & Images

Links

GRASS Website

[GRASS Website](https://grass.osgeo.org)

Images

![Width 25%](../../images/logos/large/grass-gradient-horizontal.svg){width=25%}

![Width 50%](../../images/logos/large/grass-gradient-horizontal.svg){width=50%}

![Width 75%](../../images/logos/large/grass-gradient-horizontal.svg){width=75%}

![Width 100%](../../images/logos/large/grass-gradient-horizontal.svg){width=100%}

Image Link

[![Caption](../../images/logos/large/grass-gradient.svg){width=20%}](https://grass.osgeo.org)

Image Link with Alt-Text

[![Caption](../../images/logos/large/grass-gradient.svg "Alt text"){width=20%}](https://grass.osgeo.org)

Aligned Images

![Aligned Left](../../images/logos/large/grass-gradient.svg "Alt text"){width=20% fig-align="left"}
![Aligned Right](../../images/logos/large/grass-gradient.svg "Alt text"){width=20% fig-align="right"}

![Lightbox](../../images/logos/large/grass-gradient.svg "Alt text"){width=20% fig-align="center" .lightbox}

Placeholders

<!-- Uses placeholder shortcode -->
data:image/svg+xml;base64,PHN2ZyB3aWR0aCA9ICI0MDAiIGhlaWdodCA9ICIyMDAiIHhtbG5zID0gImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94ID0gIjAgMCA0MDAgMjAwIj48cmVjdCB3aWR0aCA9ICI0MDAiIGhlaWdodCA9ICIyMDAiIGZpbGwgPSAiI2RkZCIgLz48dGV4dCB4ID0gIjUwJSIgeSA9ICI1MCUiIGZvbnQtZmFtaWx5ID0gInNhbnMtc2VyaWYiIGZvbnQtc2l6ZSA9ICIyMCIgZmlsbCA9ICIjMDAwIiB0ZXh0LWFuY2hvciA9ICJtaWRkbGUiPjQwMCB4IDIwMDwvdGV4dD48L3N2Zz4=

Callouts

Note that there are five types of callouts, including: note, tip, warning, caution, and important.

Note

Note

This is a note callout.

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

Tip

Tip

This is a tip callout.

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

Warning

Warning

This is a warning callout.

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

Important

Important

This is an important callout.

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

Caution

Caution

This is a caution callout.

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

Collapsable Callout

Expand To Learn About Collapse

This is a caution callout.

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

Math

Inline

Inline math: $E = mc^2$

Block

Block math:
$$ \int_a^b f(x) dx = F(b) - F(a) $$

Buttons

Solid Color

Primary Secondary Success Danger Warning Info Light Dark Link

[Primary](#){.btn .btn-primary .btn role="button"}
[Secondary](#){.btn .btn-secondary .btn role="button"}
[Success](#){.btn .btn-success .btn role="button"}
[Danger](#){.btn .btn-danger .btn role="button"}
[Warning](#){.btn .btn-warning .btn role="button"}
[Info](#){.btn .btn-info .btn role="button"}
[Light](#){.btn .btn-light .btn role="button"}
[Dark](#){.btn .btn-dark .btn role="button"}
[Link](#){.btn .btn-link .btn role="button"}

Outline Color

Primary Outline Secondary Outline Success Outline Danger Outline Warning Outline Info Outline Light Outline Dark Outline Link Outline

[Primary Outline](#){.btn .btn-outline-primary .btn role="button"}
[Secondary Outline](#){.btn .btn-outline-secondary .btn role="button"}
[Success Outline](#){.btn .btn-outline-success .btn role="button"}
[Danger Outline](#){.btn .btn-outline-danger .btn role="button"}
[Warning Outline](#){.btn .btn-outline-warning .btn role="button"}
[Info Outline](#){.btn .btn-outline-info .btn role="button"}
[Light Outline](#){.btn .btn-outline-light .btn role="button"}
[Dark Outline](#){.btn .btn-outline-dark .btn role="button"}
[Link Outline](#){.btn .btn-outline-link .btn role="button"}

Special Buttons

We have custom support buttons (More Info) that link to GRASS’s Open Collective page

Support

Alerts

This is a success alert.

::: {.alert .alert-success}
This is a success alert.
:::

This is a danger alert.

::: {.alert .alert-danger}
This is a danger alert.
:::

Code Blocks with Syntax Highlighting

Default

code

Python

# Comment
import sys
import subprocess

sys.path.append(
    subprocess.check_output(["grass", "--config", "python_path"], text=True).strip()
)

import grass.script as gs
import grass.jupyter as gj

Terminal

grass "~/grassdata/" --exec script.py

R

library(rgrass)

session <- initGRASS(gisBase = "/usr/lib/grass84", # where grass binaries live, `grass --config path`
                     gisDbase = "/home/user/grassdata", # path to grass database or folder where your project lives
                     location = "nc_basic_spm_grass7", # existing project name
                     mapset = "PERMANENT" # mapset name
                     )

Tabsets

R

execGRASS(
  "r.slope.aspect",
  parameters = list(
    elevation = "elevation",
    slope = "slope",
    aspect="aspect"
  )
)

Python

gs.run_command(
  "r.slope.aspect",
  elevation = "elevation",
  slope = "slope",
  aspect="aspect"
)

::: {.panel-tabset}

Your panel content here

:::

For more information about tabsets refer to the Quarto Docs here

Raw Content

\```{=html}
<iframe src="https://grass.osgeo.org/" width="500" height="400"></iframe>
```\

Diagrams

Flowchart

Show the code

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]

Sequence Diagram

Show the code

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: Hello John, how are you?
  loop Healthcheck
    John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts <br/>prevail!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: Hello John, how are you?
  loop Healthcheck
    John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts <br/>prevail!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

Dot

Show the code

graph G {
  layout=neato
  run -- intr;
  intr -- runbl;
  runbl -- run;
  run -- kernel;
  kernel -- zombie;
  kernel -- sleep;
  kernel -- runmem;
  sleep -- swap;
  swap -- runswap;
  runswap -- new;
  runswap -- runmem;
  new -- runmem;
  sleep -- runmem;
}

Videos

Use the video shortcode

https://www.youtube.com/embed/zboP3Z7VBuU

Page Break

page 1

page 2

Divs & Spans

Border

This content can be styled with a border

::: {.border}
This content can be styled with a border
:::

Spans

This is some text

[This is *some text*]{.class key="val"}

This is a custom span.

<span class="custom-span">This is a custom span.</span>

Span Styling

Small Caps

smallcaps

[smallcaps]{.smallcaps}

Underline

underlined

[underlined]{.underline}

Highlight

highlighted

[highlighted]{.mark}

Order of Attribute

The order of attribute for divs and spans follow rules defined in the pandoc documentation.

Good

[Good]{#id .class key="val"}

Bad

[This is *some text*]{.class key="val"}

Listing

Table

Grid

Default

Layout

Column Full screen inset

Column Full screen shaded inset

Column Margin

Lipsum

Lipsum shortcode docs found here.

Single Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat. Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien. Nullam faucibus leo eget eros hendrerit, non laoreet ipsum lacinia. Curabitur cursus diam elit, non tempus ante volutpat a. Quisque hendrerit blandit purus non fringilla. Integer sit amet elit viverra ante dapibus semper. Vestibulum viverra rutrum enim, at luctus enim posuere eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Multi Paragraph

Praesent ornare dolor turpis, sed tincidunt nisl pretium eget. Curabitur sed iaculis ex, vitae tristique sapien. Quisque nec ex dolor. Quisque ut nisl a libero egestas molestie. Nulla vel porta nulla. Phasellus id pretium arcu. Etiam sed mi pellentesque nibh scelerisque elementum sed at urna. Ut congue molestie nibh, sit amet pretium ligula consectetur eu. Integer consectetur augue justo, at placerat erat posuere at. Ut elementum urna lectus, vitae bibendum neque pulvinar quis. Suspendisse vulputate cursus eros id maximus. Duis pulvinar facilisis massa, et condimentum est viverra congue. Curabitur ornare convallis nisl. Morbi dictum scelerisque turpis quis pellentesque. Etiam lectus risus, luctus lobortis risus ut, rutrum vulputate justo. Nulla facilisi.

Proin sodales neque erat, varius cursus diam tincidunt sit amet. Etiam scelerisque fringilla nisl eu venenatis. Donec sem ipsum, scelerisque ac venenatis quis, hendrerit vel mauris. Praesent semper erat sit amet purus condimentum, sit amet auctor mi feugiat. In hac habitasse platea dictumst. Nunc ac mauris in massa feugiat bibendum id in dui. Praesent accumsan urna at lacinia aliquet. Proin ultricies eu est quis pellentesque. In vel lorem at nisl rhoncus cursus eu quis mi. In eu rutrum ante, quis placerat justo. Etiam euismod nibh nibh, sed elementum nunc imperdiet in. Praesent gravida nunc vel odio lacinia, at tempus nisl placerat. Aenean id ipsum sed est sagittis hendrerit non in tortor.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Formatting

Lists

Ordered List

Unordered List

Tasks

Blockquotes

> Blockquote

Line Block

Footnotes

Tables

Default

Column Aligned

Pipe Format

Pipe Format Striped

Pipe Format Custom Col widths

Grid Table

Cross Reference

Subtables

Links & Images

Links

Images

Image Link

Image Link with Alt-Text

Aligned Images

Lightbox

Placeholders

Callouts

Note

Tip

Warning

Important

Caution

Collapsable Callout

Math

Inline

Block

Buttons

Solid Color

Outline Color

Special Buttons

Alerts

Code Blocks with Syntax Highlighting

Default

Python

Terminal

R

Tabsets

R

Python

Raw Content

Diagrams

Flowchart

Sequence Diagram

Dot

Videos

Page Break

Divs & Spans

Border

Spans

Span Styling

Small Caps

Underline

Highlight

Order of Attribute

Good

Bad

Listing

Table

Grid

Default

Layout

Column Full screen inset

Column Full screen shaded inset

Column Margin

`>` Blockquote