Components Showcase

This document demonstrates various components available in Quarto.

Headings

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,¹ and another.²

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

Here is an inline note.³

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

Demonstration of pipe table syntax
fruit	price
apple	2.05
pear	1.37
orange	3.09

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

: Demonstration of pipe table syntax

Pipe Format Striped

Fruit prices
fruit	price
apple	2.05
pear	1.37
orange	3.09

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

: Fruit prices {.striped .hover}

Pipe Format Custom Col widths

Fruit prices
fruit	price
apple	2.05
pear	1.37
orange	3.09

| 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

Table 1: My Caption

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

See Table 1.

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

: My Caption {#tbl-letters}

See @tbl-letters.

Subtables

Table 2: Main Caption

(a) First Table

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

(b) Second Table

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

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 Aligned Right

![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"}

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

This is a note callout.

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

Tip

This is a tip callout.

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

Warning

This is a warning callout.

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

Important

This is an important callout.

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

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
                     )

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

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

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"}

Keyboard Shortcuts

The kbd shortcode can be used to describe keyboard shortcuts in documentation.

To print, press {{< kbd Shift-Ctrl-P >}}. 
To open an existing new project, 
press {{< kbd mac=Shift-Command-O win=Shift-Control-O linux=Shift-Ctrl-L >}}.

To print, press Shift-Ctrl-P. To open an existing new project, press .

Listing

Table

Title	Author
Test Listing	GRASS Developer Team

Grid

Test Listing

This listing is used to visualize listing styles in styling.qmd

GRASS Developer Team

Default

Test Listing

This listing is used to visualize listing styles in styling.qmd

GRASS Developer Team

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

Nullam dapibus cursus dolor sit amet consequat. Nulla facilisi. Curabitur vel nulla non magna lacinia tincidunt. Duis porttitor quam leo, et blandit velit efficitur ut. Etiam auctor tincidunt porttitor. Phasellus sed accumsan mi. Fusce ut erat dui. Suspendisse eu augue eget turpis condimentum finibus eu non lorem. Donec finibus eros eu ante condimentum, sed pharetra sapien sagittis. Phasellus non dolor ac ante mollis auctor nec et sapien. Pellentesque vulputate at nisi eu tincidunt. Vestibulum at dolor aliquam, hendrerit purus eu, eleifend massa. Morbi consectetur eros id tincidunt gravida. Fusce ut enim quis orci hendrerit lacinia sed vitae enim.

Nulla eget cursus ipsum. Vivamus porttitor leo diam, sed volutpat lectus facilisis sit amet. Maecenas et pulvinar metus. Ut at dignissim tellus. In in tincidunt elit. Etiam vulputate lobortis arcu, vel faucibus leo lobortis ac. Aliquam erat volutpat. In interdum orci ac est euismod euismod. Nunc eleifend tristique risus, at lacinia odio commodo in. Sed aliquet ligula odio, sed tempor neque ultricies sit amet.

Custom

Quarto supports several shortcodes natively which allow us to access project varibles.

More info found at https://quarto.org/docs/authoring/.
Shortcode	Description
var	Print value from `_variables.yml` file
meta	Print value from document metadata
env	Print system environment variable

Variables

You can access variables located in _variables.yml using pre-defined varible shortcodes.

{{< var grass.website >}}

Will render https://grass.osgeo.org

Includes

The include shortcode allows us to use reusable markdown.

Support Button

{{< include /content/include/_support-button.qmd >}}

renders to

<!-- Custom button for contributing to GRASS -->
[{{< fa heart >}} Support]({{< var grass.support >}}){.btn .btn-support .btn role="button"}

which renders to the content of /content/include/_support-button.qmd

<!-- Custom button for contributing to GRASS -->
[ Support](https://opencollective.com/grass/contribute){.btn .btn-support .btn role="button"}

and finally displays

Support

Footnotes

Here is the footnote.↩︎
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.↩︎
Inlines notes are easier to write, since you don’t have to pick an identifier and move down to type the note.↩︎

Citation

BibTeX citation:

@article{white2025,
  author = {White, Corey and White, Sarah},
  title = {GRASS {Quarto} {Design} {Guide}},
  journal = {GRASS},
  volume = {1},
  number = {1},
  date = {2025-05},
  url = {https://grass-tutorials.osgeo.org/content/tests/styling.html},
  doi = {10.0000/0000000},
  issn = {0000-0000},
  langid = {en}
}

For attribution, please cite this work as:

White, Corey, and Sarah White. 2025. “GRASS Quarto Design Guide.” GRASS 1 (1). https://doi.org/10.0000/0000000.

--- title: GRASS Quarto Design Guide description: Adopted from Quarto Documentation image: images/LinkedIn-Post-Image.png title-block-banner: true author: - name: Corey White - name: Sarah White date: May 5, 2025 date-modified: today categories: ['design', 'guide', 'styling'] format: html: other-links: - text: GRASS Website href: https://grass.osgeo.org - text: Quarto href: https://quarto.org/ code-links: - text: Data Import Code icon: file-code href: data-import.py notebook-links: inline code-tools: true code-copy: true code-fold: true code-summary: "Show the code" code-overflow: wrap profile: local toc: true toc-depth: 3 listing: - id: lab-reports contents: "*.qmd" type: table - id: meeting-notes contents: "*.qmd" type: grid - id: default-notes contents: "*.qmd" type: default citation: type: article-journal container-title: GRASS volume: 1 issue: 1 issued: 2025-05 issn: 0000-0000 doi: 10.0000/0000000 execute: eval: true echo: true output: true --- # Components Showcase This document demonstrates various components available in Quarto. ## Headings Heading 1 is bolded and used as the title of the page. # Heading 1 ```md # Heading 1 ``` Heading 2 is thined and used to introduce a new section or topic within a page. ## Heading 2 ```md ## Heading 2 ``` Heading 3 is bolded and used to introduce a new subsection or subtopic within a page. ### Heading 3 ```md ### 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 ```md #### Heading 4 ##### Heading 5 ###### Heading 6 ``` > All heading are enforced as **sentence case**. ## Text Formatting **Bold Text** *Italic Text* ~~Strikethrough~~ `Inline Code` superscript^2^ / subscript~2~ ```md **Bold Text** *Italic Text* ~~Strikethrough~~ `Inline Code` superscript^2^ / subscript~2~ ``` ## Lists ### Ordered List 1. First item 2. Second item 3. Third item ```md 1. First item 2. Second item 3. Third item ``` ### Unordered List - Item 1 - Item 2 - Item 3 ```md - Item 1 - Item 2 - Item 3 ``` * unordered list + sub-item 1 + sub-item 2 - sub-sub-item 1 ```md * unordered list + sub-item 1 + sub-item 2 - sub-sub-item 1 ``` * item 2 Continued (indent 4 spaces) ```md * item 2 Continued (indent 4 spaces) ``` (@) A list which numbering continues after (@) an interruption ```md (@) A list which numbering continues after (@) an interruption ``` ### Tasks - [ ] Task 1 - [x] Task 2 ```md - [ ] Task 1 - [x] Task 2 ``` ## Blockquotes ### `>` Blockquote > This is a blockquote. > It can span multiple lines. ```md > This is a blockquote. > It can span multiple lines. ``` ### Line Block | Line Block | Spaces and newlines | are preserved ```md | Line Block | Spaces and newlines | are preserved ``` ## Footnotes 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.] ```md 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 | ```md | 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 | ```md | 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 ```md 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 {.striped .hover} ```md | 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 {tbl-colwidths="[75,25]"} ```md | fruit | price | |--------|--------| | apple | 2.05 | | pear | 1.37 | | orange | 3.09 | : Fruit prices {tbl-colwidths="[75,25]"} ``` ### Grid Table +-----------+-----------+--------------------+ | Fruit | Price | Advantages | +===========+===========+====================+ | Bananas | $1.34 | - built-in wrapper | | | | - bright color | +-----------+-----------+--------------------+ | Oranges | $2.10 | - cures scurvy | | | | - tasty | +-----------+-----------+--------------------+ : Sample grid table. ```md +-----------+-----------+--------------------+ | 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 | : My Caption {#tbl-letters} See @tbl-letters. ```md | Col1 | Col2 | Col3 | |------|------|------| | A | B | C | | E | F | G | | A | G | G | : My Caption {#tbl-letters} See @tbl-letters. ``` ### Subtables ::: {#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. ```md ::: {#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]({{< var grass.website >}}) ```md [GRASS Website]({{< var grass.website >}}) ``` ### Images ![Width 25%]({{< var grass.logos.horizontal.gradient >}}){width=25%} ```md ![Width 25%]({{< var grass.logos.horizontal.gradient >}}){width=25%} ``` ![Width 50%]({{< var grass.logos.horizontal.gradient >}}){width=50%} ```md ![Width 50%]({{< var grass.logos.horizontal.gradient >}}){width=50%} ``` ![Width 75%]({{< var grass.logos.horizontal.gradient >}}){width=75%} ```md ![Width 75%]({{< var grass.logos.horizontal.gradient >}}){width=75%} ``` ![Width 100%]({{< var grass.logos.horizontal.gradient >}}){width=100%} ```md ![Width 100%]({{< var grass.logos.horizontal.gradient >}}){width=100%} ``` ### Image Link [![Caption]({{< var grass.logos.gradient >}}){width=20%}]({{< var grass.website >}}) ```md [![Caption]({{< var grass.logos.gradient >}}){width=20%}]({{< var grass.website >}}) ``` ### Image Link with Alt-Text [![Caption]({{< var grass.logos.gradient >}} "Alt text"){width=20%}]({{< var grass.website >}}) ```md [![Caption]({{< var grass.logos.gradient >}} "Alt text"){width=20%}]({{< var grass.website >}}) ``` ### Aligned Images ![Aligned Left]({{< var grass.logos.gradient >}} "Alt text"){width=20% fig-align="left"} ![Aligned Right]({{< var grass.logos.gradient >}} "Alt text"){width=20% fig-align="right"} ```md ![Aligned Left]({{< var grass.logos.gradient >}} "Alt text"){width=20% fig-align="left"} ![Aligned Right]({{< var grass.logos.gradient >}} "Alt text"){width=20% fig-align="right"} ``` ### Lightbox ![Lightbox]({{< var grass.logos.gradient >}} "Alt text"){width=20% fig-align="center" .lightbox} ```md ![Lightbox]({{< var grass.logos.gradient >}} "Alt text"){width=20% fig-align="center" .lightbox} ``` ### Placeholders {{< placeholder 400 200 format=svg >}} ```md  {{< placeholder 400 200 format=svg >}} ``` ## Callouts Note that there are five types of callouts, including: `note`, `tip`, `warning`, `caution`, and `important`. ### Note ::: {.callout-note} This is a note callout. ::: ```md ::: {.callout-note} This is a note callout. ::: ``` ### Tip ::: {.callout-tip} This is a tip callout. ::: ```md ::: {.callout-tip} This is a tip callout. ::: ``` ### Warning ::: {.callout-warning} This is a warning callout. ::: ```md ::: {.callout-warning} This is a warning callout. ::: ``` ### Important ::: {.callout-important} This is an important callout. ::: ```md ::: {.callout-important} This is an important callout. ::: ``` ### Caution ::: {.callout-caution} This is a caution callout. ::: ```md ::: {.callout-caution} This is a caution callout. ::: ``` ### Collapsable Callout ::: {.callout-caution collapse="true"} ## Expand To Learn About Collapse This is a caution callout. ::: ```md ::: {.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](#){.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"} ```md [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](#){.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"} ```md [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](#includes)) that link to GRASS's [Open Collective page]({{< var grass.support >}}) {{< include /content/include/_support-button.qmd >}} {{< include /content/include/_support-outline-button.qmd >}} ## Alerts ::: {.alert .alert-success} This is a success alert. ::: ```md ::: {.alert .alert-success} This is a success alert. ::: ``` ::: {.alert .alert-danger} This is a danger alert. ::: ```md ::: {.alert .alert-danger} This is a danger alert. ::: ``` ## Code Blocks with Syntax Highlighting ### Default ```default code ``` ### Python ```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 ```bash grass "~/grassdata/" --exec script.py ``` ### R ```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 ::: {.panel-tabset} ## R ``` {.r} execGRASS( "r.slope.aspect", parameters = list( elevation = "elevation", slope = "slope", aspect="aspect" ) ) ``` ## Python ``` {.python} gs.run_command( "r.slope.aspect", elevation = "elevation", slope = "slope", aspect="aspect" ) ``` ::: ```md ::: {.panel-tabset} Your panel content here ::: ``` For more information about tabsets refer to the Quarto Docs [here](https://quarto.org/docs/output-formats/html-basics.html#tabsets) ## Raw Content ```{=html} <iframe src="https://grass.osgeo.org/" width="500" height="400"></iframe> ``` ```md \```{=html} <iframe src="https://grass.osgeo.org/" width="500" height="400"></iframe> ```\ ``` ## Diagrams ### Flowchart ```{mermaid} flowchart LR A[Hard edge] --> B(Round edge) B --> C{Decision} C --> D[Result one] C --> E[Result two] ``` ### Sequence Diagram ```{mermaid} 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 ```{dot} 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://quarto.org/docs/authoring/videos.html) {{< video https://www.youtube.com/embed/zboP3Z7VBuU >}} ## Page Break page 1 {{< pagebreak >}} page 2 ## Divs & Spans ### Border ::: {.border} This content can be styled with a border ::: ```md ::: {.border} This content can be styled with a border ::: ``` ### Spans [This is *some text*]{.class key="val"} ```md [This is *some text*]{.class key="val"} ``` <span class="custom-span">This is a custom span.</span> ```md <span class="custom-span">This is a custom span.</span> ``` ### Span Styling #### Small Caps [smallcaps]{.smallcaps} ```md [smallcaps]{.smallcaps} ``` #### Underline [underlined]{.underline} ```md [underlined]{.underline} ``` #### Highlight [highlighted]{.mark} ``` [highlighted]{.mark} ``` ### Order of Attribute The order of attribute for divs and spans follow rules defined in the [pandoc](https://pandoc.org/MANUAL.html#divs-and-spans) documentation. #### Good ```md [Good]{#id .class key="val"} ``` #### Bad ```md [This is *some text*]{.class key="val"} ``` ## Keyboard Shortcuts The [kbd]{.text-success} shortcode can be used to describe keyboard shortcuts in documentation. ```md {.markdown shortcodes="false"} To print, press {{< kbd Shift-Ctrl-P >}}. To open an existing new project, press {{< kbd mac=Shift-Command-O win=Shift-Control-O linux=Shift-Ctrl-L >}}. ``` To print, press {{< kbd Shift-Ctrl-P >}}. To open an existing new project, press {{< kbd mac=Shift-Command-O win=Shift-Control-O linux=Shift-Ctrl-L >}}. ## Listing ### Table :::{#lab-reports} ::: ### Grid :::{#meeting-notes} ::: ### Default :::{#default-notes} ::: ## Layout ### Column Full screen inset ::: {.column-screen-inset} ![A full screen image](images/LinkedIn-Post-Image.png) ::: ### Column Full screen shaded inset ::: {.column-shaded-screen-inset} ![A full screen image](images/LinkedIn-Post-Image.png) ::: ### Column Margin ::: {.column-margin} ![An image in the margin](images/LinkedIn-Post-Image.png) ::: ## Lipsum Lipsum shortcode docs found [here](https://quarto.org/docs/authoring/lipsum.html). ### Single Paragraph {{< lipsum 1 >}} ### Multi Paragraph {{< lipsum 2 random=true >}} # Custom Quarto supports several shortcodes natively which allow us to access project varibles. | Shortcode | Description | |---------------------------------------------------------------|------------------------------------------| | [var](https://quarto.org/docs/authoring/variables.html#va) | Print value from `_variables.yml` file | | [meta](https://quarto.org/docs/authoring/variables.html#meta) | Print value from document metadata | | [env](https://quarto.org/docs/authoring/variables.html#env) | Print system environment variable | : More info found at [https://quarto.org/docs/authoring/](https://quarto.org/docs/authoring/). ## Variables You can access variables located in `_variables.yml` using pre-defined [varible shortcodes](https://quarto.org/docs/authoring/variables.html). ``` {.markdown shortcodes="false"} {{< var grass.website >}} ``` Will render {{< var grass.website >}} ## Includes The include [shortcode](https://quarto.org/docs/authoring/includes.html) allows us to use reusable markdown. ### Support Button `{{< include /content/include/_support-button.qmd >}}` renders to ``` {.markdown shortcodes="false"} {{< include /content/include/_support-button.qmd >}} ``` which renders to the content of `/content/include/_support-button.qmd` ``` {.markdown shortcodes="true"} {{< include /content/include/_support-button.qmd >}} ``` and finally displays {{< include /content/include/_support-button.qmd >}}

Components Showcase

Headings

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

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

Keyboard Shortcuts

Listing

Table

Grid

Test Listing

Default

Test Listing

Layout

`>` Blockquote