Heading 1

This page contains the most common content components, such as:

• Heading 2
  • Heading 3
    • Heading 4
      • Heading 5
        • Heading 6
• Block Quote
• Code
• Custom Elements
  • Note
  • Simple Grid
• Images
• Lists
• Horizontal Rule
• Links
• Tables
• Text

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque varius morbi enim nunc faucibus a. Montes nascetur ridiculus mus mauris vitae ultricies.

Heading 3

Lectus nulla at volutpat diam ut. Tortor vitae purus faucibus ornare suspendisse. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Velit euismod in pellentesque massa. Quis commodo odio aenean sed. Quis auctor elit sed vulputate mi sit amet.

Heading 4

Condimentum lacinia quis vel eros. Condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi. Dignissim cras tincidunt lobortis feugiat vivamus at. Luctus venenatis lectus magna fringilla urna.

Heading 5

Suspendisse faucibus interdum posuere lorem ipsum dolor. Ultricies lacus sed turpis tincidunt id aliquet risus. Volutpat est velit egestas dui id ornare arcu. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Enim eu turpis egestas pretium aenean pharetra magna. Nulla malesuada pellentesque elit eget.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque varius morbi enim nunc faucibus a. Montes nascetur ridiculus mus mauris vitae ultricies.

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:

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

Result:

Simple Grid

Markdown:

 :::simple-grid

 ![An old book front for Jekyll and Hyde](/assets/img/jekyll-and-hyde.webp){:loading="lazy"}

 ![An old book front for Jekyll and Hyde](/assets/img/jekyll-and-hyde.webp){:loading="lazy"}

 :::

Result:

Images

Markdown:

![An old book front for Jekyll and Hyde](/assets/img/jekyll-and-hyde.webp){:loading="lazy"}

Result:

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://jekyll.stevefenton.co.uk/kitchen-sink/>

[Jekyll Boilerplate](https://jekyll.stevefenton.co.uk/ "The Jekyll Boilerplate Site")

Result:

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

Jekyll Boilerplate

Tables

Markdown:

| Item | One | Two | Three |
| :--  | :-: | :-: | :-:   |
| A    | 1   | 2   | 3     |
| B    | 2   | 3   | 4     |
| C    | 3   | 4   | 5     |

Result:

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.