h1

h2

h3

h4

h5

Paragraph text

Blockquote

Quote

Footnote

Here’s a footnote.¹

Code

function js() {
    console.log("js");
}

Image

Ordered Lists

1. Misunderstandings: Clients don’t know the lingo, and often are afraid to say what they want. To the point of horror stories of walking out with tattoos too large or in an unwanted position because they didn’t speak up.
2. Some content here
   1. Some nested content
   2. More nesting

Unordered Lists

• Unordered list item
• Cake ice cream sweet sesame snaps dragée cupcake wafer cookie
• Unordered list item

Grid

<Grid columns={3} spacing="1rem"></Grid>

ImageFigure

<ImageFigure
  src="https://via.placeholder.com/600x300/c0392b/FFFFFF"
  alt="Alt text"
/>

<ImageFigure
  src="https://via.placeholder.com/600x300/c0392b/FFFFFF"
  alt=""
>
This is with _html_ text.
</ImageFigure>

<ImageFigure
  src="https://via.placeholder.com/600x300/c0392b/FFFFFF"
  alt="This has alt text"
>
and _html_ text.
</ImageFigure>

Sidenote

<Sidenote title="University Project">
This project was completed in my 3<sup>rd</sup> year at [Imperial College London](https://imperial.ac.uk).
</Sidenote>

<Sidenote type="success" title="Positive">
Some positive sidenote.
</Sidenote>

<Sidenote type="warning" title="Warning">
Some warning sidenote.
</Sidenote>

Math

Block

Inline

Some text $1+3$

SpeechBubble

Test

Sparkles client:idle

Some normal text with and some with pizazz

Slider

Image Comparison client:load

• !! Only external images !!
• Must be wrapped in a grid aware component e.g. figure