import { Meta } from '@storybook/blocks';

<Meta title="Typography" />

export const SampleText = 'Lorem ipsum dolor sit amet, consectetur';

# Typography

Given that this project uses Tailwind via Skeleton.dev, the usual Storybook
Typeset cannot be used. Instead this is how it will actually be styled:

## Heading

<h1 class="h1">H1: {SampleText}</h1>
<h2 class="h2">H2: {SampleText}</h2>
<h3 class="h3">H3: {SampleText}</h3>
<h4 class="h4">H4: {SampleText}</h4>
<h5 class="h5">H5: {SampleText}</h5>
<h6 class="h6">H6: {SampleText}</h6>

## Paragraph

<p>{SampleText}</p>

## Anchor

<p style={{ minHeight: '1em', position: 'relative' }}>
	<a class="anchor" href="/">
		Anchor
	</a>
</p>

## Blockquote

<blockquote class="blockquote">Blockquote</blockquote>

## Preformatted text

<pre class="pre">Preformatted text</pre>

## Code

<code class="code">Code</code>

## Keyboard

<kbd class="kbd">Keyboard</kbd>

## Insertion

<ins class="ins">Insertion</ins>

## Deletion

<del class="del">Deletion</del>