Kitchen Sink

This page contains the most common content components.



Mobile Menu



Search Page


Search

Search the site below.






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.

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

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:

This is a custom div element with the class note

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:

Book cover

Book cover

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:

This is a custom div element with the class note

This is a custom div element with the class note

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:

Book cover

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:


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:

ItemOneTwoThree
Some description of the item123
Some description of the item234
Some description of the item345

A large table:

Performance levelLead timeDeployment frequencyChange failure rateMean time to resolve
Elite< 1 hourMultiple times per day0-15%< 1 hour
High1 day - 1 weekWeekly to monthly16-30%< 1 day
Medium1-6 monthsMonthly to biannually16-30%1 day - 1 week
Low> 6 monthsFewer than once every 6 months16-30%> 6 months

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.