Typography
Usage
Heading 1
Heading 1 Bold
The quick brown fox jumps over the lazy dog.
<h1 class="heading-1-bold">Heading 1 Bold</h1>
<p class="heading-1-bold">The quick brown fox jumps over the lazy dog.</p>Heading 1 Medium
The quick brown fox jumps over the lazy dog.
<h1 class="heading-1-medium">Heading 1 Medium</h1>
<p class="heading-1-medium">The quick brown fox jumps over the lazy dog.</p>Heading 1 Regular
The quick brown fox jumps over the lazy dog.
<h1 class="heading-1-regular">Heading 1 Regular</h1>
<p class="heading-1-regular">The quick brown fox jumps over the lazy dog.</p>Heading 2
Heading 2 Bold
The quick brown fox jumps over the lazy dog.
<h2 class="heading-2-bold">Heading 2 Bold</h2>
<p class="heading-2-bold">The quick brown fox jumps over the lazy dog.</p>Heading 2 Medium
The quick brown fox jumps over the lazy dog.
<h2 class="heading-2-medium">Heading 2 Medium</h2>
<p class="heading-2-medium">The quick brown fox jumps over the lazy dog.</p>Heading 2 Regular
The quick brown fox jumps over the lazy dog.
<h2 class="heading-2-regular">Heading 2 Regular</h2>
<p class="heading-2-regular">The quick brown fox jumps over the lazy dog.</p>Heading 3
Heading 3 Bold
The quick brown fox jumps over the lazy dog.
<h3 class="heading-3-bold">Heading 3 Bold</h3>
<p class="heading-3-bold">The quick brown fox jumps over the lazy dog.</p>Heading 3 Medium
The quick brown fox jumps over the lazy dog.
<h3 class="heading-3-medium">Heading 3 Medium</h3>
<p class="heading-3-medium">The quick brown fox jumps over the lazy dog.</p>Heading 3 Regular
The quick brown fox jumps over the lazy dog.
<h3 class="heading-3-regular">Heading 3 Regular</h3>
<p class="heading-3-regular">The quick brown fox jumps over the lazy dog.</p>Heading 4
Heading 4 Bold
The quick brown fox jumps over the lazy dog.
<h4 class="heading-4-bold">Heading 4 Bold</h4>
<p class="heading-4-bold">The quick brown fox jumps over the lazy dog.</p>Heading 4 Medium
The quick brown fox jumps over the lazy dog.
<h4 class="heading-4-medium">Heading 4 Medium</h4>
<p class="heading-4-medium">The quick brown fox jumps over the lazy dog.</p>Heading 4 Regular
The quick brown fox jumps over the lazy dog.
<h4 class="heading-4-regular">Heading 4 Regular</h4>
<p class="heading-4-regular">The quick brown fox jumps over the lazy dog.</p>Heading 5
Heading 5 Bold
The quick brown fox jumps over the lazy dog.
<h5 class="heading-5-bold">Heading 5 Bold</h5>
<p class="heading-5-bold">The quick brown fox jumps over the lazy dog.</p>Heading 5 Medium
The quick brown fox jumps over the lazy dog.
<h5 class="heading-5-medium">Heading 5 Medium</h5>
<p class="heading-5-medium">The quick brown fox jumps over the lazy dog.</p>Heading 5 Regular
The quick brown fox jumps over the lazy dog.
<h5 class="heading-5-regular">Heading 5 Regular</h5>
<p class="heading-5-regular">The quick brown fox jumps over the lazy dog.</p>Heading 6
Heading 6 Bold
The quick brown fox jumps over the lazy dog.
<h6 class="heading-6-bold">Heading 6 Bold</h6>
<p class="heading-6-bold">The quick brown fox jumps over the lazy dog.</p>Heading 6 Medium
The quick brown fox jumps over the lazy dog.
<h6 class="heading-6-medium">Heading 6 Medium</h6>
<p class="heading-6-medium">The quick brown fox jumps over the lazy dog.</p>Heading 6 Regular
The quick brown fox jumps over the lazy dog.
<h6 class="heading-6-regular">Heading 6 Regular</h6>
<p class="heading-6-regular">The quick brown fox jumps over the lazy dog.</p>Base Text
Base Text Bold - The quick brown fox jumps over the lazy dog.
<p class="base-bold">Base Text Bold - The quick brown fox jumps over the lazy dog.</p>Base Text Medium - The quick brown fox jumps over the lazy dog.
<p class="base-medium">Base Text Medium - The quick brown fox jumps over the lazy dog.</p>Base Text Regular - The quick brown fox jumps over the lazy dog.
<p class="base-regular">Base Text Regular - The quick brown fox jumps over the lazy dog.</p>Small Text
Small Text Bold - The quick brown fox jumps over the lazy dog.
<p class="small-bold">Small Text Bold - The quick brown fox jumps over the lazy dog.</p>Small Text Medium - The quick brown fox jumps over the lazy dog.
<p class="small-medium">Small Text Medium - The quick brown fox jumps over the lazy dog.</p>Small Text Regular - The quick brown fox jumps over the lazy dog.
<p class="small-regular">Small Text Regular - The quick brown fox jumps over the lazy dog.</p>Extra Small Text
Xsmall Text Bold - The quick brown fox jumps over the lazy dog.
<p class="xsmall-bold">Xsmall Text Bold - The quick brown fox jumps over the lazy dog.</p>Xsmall Text Medium - The quick brown fox jumps over the lazy dog.
<p class="xsmall-medium">Xsmall Text Medium - The quick brown fox jumps over the lazy dog.</p>Xsmall Text Regular - The quick brown fox jumps over the lazy dog.
<p class="xsmall-regular">Xsmall Text Regular - The quick brown fox jumps over the lazy dog.</p>