import { Meta } from '@storybook/addon-docs'

<Meta title="Design System/Typography" />

<h1 id="typography">Typography</h1>

In order to maintain a consistent look and feel woth design in terms of the typography,
we have a set of CSS classes that we use. Using `font-family`,
`font-weight` and `font-size` directly in your code should be avoided and instead use this set
of classes.

### **Font colors**

Colors for the text should be added independently using proper color classes. See example below.

```html
<div class="mt-6 sb-unstyled heading-h1 text-neutral-20">Lorem ipsum</div>
```

### **Table of contents**

- [Headings](#headings)
- [Paragraph](#paragraph)
- [Currency](#currency)
- [Utility](#utility)
- [Monospaced](#monospaced)

<h3 id="headings">**Headings**</h3>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h1`
  <div class="mt-6 sb-unstyled heading-h1">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h2`
  <div class="mt-6 sb-unstyled heading-h2">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h3`
  <div class="mt-6 sb-unstyled heading-h3">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h4`
  <div class="mt-6 sb-unstyled heading-h4">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h5`
  <div class="mt-6 sb-unstyled heading-h5">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h1-medium-apax`
  <div class="mt-6 sb-unstyled heading-h1-medium-apax">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h1-regular-apax`
  <div class="mt-6 sb-unstyled heading-h1-regular-apax">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h2-medium-apax`
  <div class="mt-6 sb-unstyled heading-h2-medium-apax">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h3-medium-apax`
  <div class="mt-6 sb-unstyled heading-h3-medium-apax">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h4-medium-apax`
  <div class="mt-6 sb-unstyled heading-h4-medium-apax">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h4-medium-uppercase-apax`
  <div class="mt-6 sb-unstyled heading-h4-medium-uppercase-apax">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h5-medium-apax`
  <div class="mt-6 sb-unstyled heading-h5-medium-apax">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `heading-h5-medium-uppercase-apax`
  <div class="mt-6 sb-unstyled heading-h5-medium-uppercase-apax">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<h3 id="paragraph">**Paragraph** [↑](#typography)</h3>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `paragraph-16-regular`
  <div class="mt-6 sb-unstyled paragraph-16-regular">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `paragraph-16-semi-bold`
  <div class="mt-6 sb-unstyled paragraph-16-semi-bold">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `paragraph-14-regular`
  <div class="mt-6 sb-unstyled paragraph-14-regular">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `paragraph-14-medium`
  <div class="mt-6 sb-unstyled paragraph-14-medium">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `paragraph-14-semi-bold`
  <div class="mt-6 sb-unstyled paragraph-14-semi-bold">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `paragraph-12-regular`
  <div class="mt-6 sb-unstyled paragraph-12-regular">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `paragraph-12-medium`
  <div class="mt-6 sb-unstyled paragraph-12-medium">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `paragraph-12-semi-bold`
  <div class="mt-6 sb-unstyled paragraph-12-semi-bold">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<h3 id="currency">**Currency** [↑](#typography)</h3>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `currency-10-semi-bold`
  <div class="mt-6 sb-unstyled currency-10-semi-bold">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `currency-10-bold-uppercase`
  <div class="mt-6 sb-unstyled currency-10-bold-uppercase">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `currency-14-semi-bold`
  <div class="mt-6 sb-unstyled currency-14-semi-bold">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<h3 id="utility">**Utility** [↑](#typography)</h3>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `link`
  <div class="mt-6 sb-unstyled link">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `button-text`
  <div class="mt-6 sb-unstyled button-text">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `caption`
  <div class="mt-6 sb-unstyled caption">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<h3 id="monospaced">**Monospaced** [↑](#typography)</h3>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `monospaced-16-regular`
  <div class="mt-6 sb-unstyled monospaced-16-regular">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `monospaced-16-bold`
  <div class="mt-6 sb-unstyled monospaced-16-bold">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `monospaced-12-bold`
  <div class="mt-6 sb-unstyled monospaced-12-bold">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>

<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
  #### `monospaced-10-bold`
  <div class="mt-6 sb-unstyled monospaced-10-bold">
    The quick brown fox jumps over the lazy dog.
  </div>
</div>