---
layout: "layouts/base"
permalink: /styleguide/index.html
title: Styleguide
---

<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<p>Paragraph text</p>
<p>
    <strong>Bold text</strong>
</p>
<p>
    <em>Emphasized text</em>
</p>
<p>
    <strong>
        <em>Bold and emphasized text</em>
    </strong>
</p>
<p>
    An abbreviation: <abbr title="Hypertext Markup Language">HTML</abbr>
</p>
<hr />
<div class="[ flex ]">
    <div class="[ size-2 ]" style="background-color: var(--color-primary)"></div>
    <div class="[ size-2 ]" style="background-color: var(--color-secondary)"></div>
    <div class="[ size-2 ]" style="background-color: var(--color-background)"></div>
    <div class="[ size-2 ]" style="background-color: var(--color-surface)"></div>
    <div class="[ size-2 ]" style="background-color: var(--color-border)"></div>
    <div class="[ size-2 ]" style="background-color: var(--color-text)"></div>
    <div class="[ size-2 ]" style="background-color: var(--color-fadeText)"></div>
    <div class="[ size-2 ]" style="background-color: var(--color-shadow)"></div>
</div>
<hr />
<a href="#">A link</a>
<a href="/">A visited link</a>
<hr />
<blockquote>
    <p>A blockquote</p>
    <p>Here is some more text</p>
    <p>And even more!</p>
</blockquote>
<hr />
<p>An unordered list</p>
<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>
<hr />
<p>An ordered list</p>
<ol>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ol>
<hr />
<aside>
    <p>An aside block</p>
</aside>
<hr />
<figure>
    <img src="/assets/images/logo.svg" />
    <figcaption>A fig caption.</figcaption>
</figure>
<hr />
<div style="background-color: var(--color-surface);
            border: 1px solid var(--color-border);
            padding: 1rem">A card-type component.</div>
<hr />
<div style="box-shadow: 2px 2px 8px hsl(var(--shadow) / 0.34);
            padding: 1rem">This box has a shadow</div>