Adding Content to Pages#

Now that we know how to create and view our pages, let’s now explore how to add content to them. This page will show you how to create everything you may want to display on your pages.

Subheadings#

Subheadings are used to divide and group relevant content on a single page. They show up on the right sidebar and can be clicked on to navigate through a page.

## Subheading 1

Text underneath a subheading.

## Subheading 2

Some additional text.

Bold and italics#

You can apply different text styles like bold and italics like so:

This is **bold text**. This is *italic text*.
Result

This is bold text. This is italic text.

Images#

You can add an image by referencing its relative file path:

![text description of image](images/example.png)
Result

text description of image

You may notice that the text description isn’t shown in the result. This is because it’s usually used by screen reader technology to describe the image to a reader.

Buttons#

If you don’t want to use a link, you can instead use a button.

:::{button} https://example.com
Button text
:::
Result

Button text

Referencing#

You can add sources to your content by using footnote references.

This is an example text with a reference[^reference-title] in it.

[^reference-title]: Reference description (usually a link).
Result

This is an example text with a reference[1] in it.

The reference description will be displayed in an auto-generated footnote at the bottom of your page.

Lists#

You can create a list of items:

- Item 1
- Item 2
- Item 3
Result

  • Item 1

  • Item 2

  • Item 3

As well as a numbered variant:

1. Item 1
1. Item 2
1. Item 3
Result

  1. Item 1

  2. Item 2

  3. Item 3

Notice that you don’t need to specify specific numbers in the numbered variant, as the correct numbering will be auto-generated on your page.

Cards#

Cards are useful for showing bite-sized information. You can add as many cards as you want. In this example, I added 3.

::::{card-grid}

:::{grid-item-card} Card title
This is a paragraph inside a card.
:::

:::{grid-item-card} Card title 2
This is another paragraph.
:::

:::{grid-item-card} Card title 3
This is another paragraph.
:::

::::
Result
Card title

This is a paragraph inside a card.

Card title 2

This is another paragraph.

Card title 3

This is another paragraph.

Notes#

Add notes to highlight certain information that doesn’t exactly fit into your paragraph.

:::{note}
This is noteworthy!
:::
Result

Note

This is noteworthy!