This page contains the most common content components.

Breadcrumbs

---

---

Mobile Menu

---

---

Search Page

---

Search

Search the site below.

Search for Go

---

Footer

---

---

Page Links

---

---

Block Quote

Markdown:

> Quiet minds cannot be perplexed or frightened
> but go on in fortune or misfortune at their own
> private pace, like a clock during a thunderstorm.
> <cite>Robert Louis Stevenson</cite>

Result:

Quiet minds cannot be perplexed or frightened but go on in fortune or misfortune at their own private pace, like a clock during a thunderstorm. Robert Louis Stevenson

Code

Markdown:

Inline `code` and a code block.

    const elem = document.querySelector('.elem');

A code block with a language set.

```javascript
const elem = document.querySelector('.elem');
```

Result:

Inline code and a code block with a language set.

const elem = document.querySelector('.elem');

Custom Elements

Note

Markdown:

:::div{.note}
This is a custom div element with the class `note`
:::

Result:

Simple Grid

Markdown:

:::figure{.simple-grid}
:img{ src="/img/frankenstein.png" alt="Book cover" loading="lazy" }

:img{ src="/img/frankenstein.png" alt="Book cover" loading="lazy" }
:::

Result:

Nested blocks

Outer blocks must have more : characters than inner blocks:

::::div{.simple-grid}
:::div{.note}
This is a custom div element with the class `note`
:::
:::div{.note}
This is a custom div element with the class `note`
:::
::::

Result:

Images

Markdown:

:img{ src="/img/frankenstein.png" alt="Book cover" loading="lazy" }

This creates the following HTML (or similar):

<img
    src="/i/x/frankenstein.png"
    alt="Book cover"
    loading="lazy"
    srcset="
        /i/400/frankenstein.webp  400w,
        /i/700/frankenstein.webp  700w,
        /i/1000/frankenstein.webp,
        1000w
    "
    sizes="(max-width: 860px) 100vw, 66vw"
    class="resp-img"
/>

Result:

You can also wrap images in figures and optionally add a caption:

:::figure
:img{ src="/img/frankenstein.png" alt="Book cover" loading="lazy" }
::figcaption[The modern hardback edition of Frankenstein]
:::

Videos

A YT video alone will auto-embed behind a click

When a YT video is within a paragraph, it doesn’t auto-embed.

Lists

Markdown:

1. Item
1. Item
    - Nested Item
1. Item

    Item additional paragraph.

Result:

1. Item

2. Item

   • Nested Item

3. Item

   Item additional paragraph.

Horizontal Rule

Markdown:

---

Result:

---

Links

Markdown:

<https://astro.stevefenton.co.uk/kitchen-sink/>

[Astro Accelerator](https://astro.stevefenton.co.uk/ 'The Astro Accelerator Site')

Result:

https://astro.stevefenton.co.uk/kitchen-sink/

Astro Accelerator

Tables

Markdown:

| Item                         | One | Two | Three |
| :--------------------------- | :-: | :-: | :---: |
| Some description of the item |  1  |  2  |   3   |
| Some description of the item |  2  |  3  |   4   |
| Some description of the item |  3  |  4  |   5   |

Result:

A large table:

Text

Markdown:

Text can use _emphasis_ or **strong**. You can create\
line breaks.

Result:

Text can use emphasis or strong. You can create
line breaks.

Headings

This section has all headings, from level 1 (above) to level 6.

Heading 2

Example text.

Heading 3

Example text.

Heading 4

Example text.

Heading 5

Example text.

Heading 6

Example text.