Headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>

Link

<a href="https://www.google.com">Google</a>

Paragraph

The p class can be used to apply default paragraph styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nibh non dapibus sodales. Aenean est lorem, faucibus eget nibh id, scelerisque maximus ligula. Duis ullamcorper commodo velit vitae eleifend. Duis nec magna a est pharetra consectetur eu semper felis. In convallis ac nunc ut euismod. Sed efficitur tempor ex. Nullam vitae libero et libero fermentum consequat. Nam a dapibus ante. Suspendisse ac dapibus felis, malesuada semper metus. Nulla aliquet igula massa. Aenean gravida erat vehicula mi tristique, sit amet facilisis lorem mattis. Morbi non arcu finibus sapien bibendum rhoncus. Aenean enim elit, euismod eget ex sit amet, ornare tempor nisi. Nullam vitae mauris sed tortor rutrum fermentum at quis sapien. Nunc nec vehicula augue. Vestibulum ornare auctor iaculis. Integer porttitor eget enim id molestie.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nibh non dapibus sodales. Aenean est lorem,
faucibus eget nibh id, scelerisque maximus ligula. Duis ullamcorper commodo velit vitae eleifend. Duis nec magna a est
pharetra consectetur eu semper felis. In convallis ac nunc ut euismod. Sed efficitur tempor ex. Nullam vitae libero et
libero fermentum consequat. Nam a dapibus ante. Suspendisse ac dapibus felis, malesuada semper metus.  Nulla aliquet
igula massa. Aenean gravida erat vehicula mi tristique, sit amet facilisis lorem mattis. Morbi non arcu finibus
sapien bibendum rhoncus. Aenean enim elit, euismod eget ex sit amet, ornare tempor nisi. Nullam vitae mauris sed
tortor rutrum fermentum at quis sapien. Nunc nec vehicula augue. Vestibulum ornare auctor iaculis. Integer porttitor
eget enim id molestie.
</p>

Label

<label>This is a label</label>

Small

The small class can also be used to apply small styling to another tag type.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>

Text Colors

Apply any of the colors from our default pallete to text. text-black, text-blue, text-bright-blue, text-green, text-yellow, text-red, text-salmon, text-orange, text-dark-gray, text-divider-gray, text-medium-gray, text-button-gray, text-background-gray, text-drawer-gray, text-white

Black Blue Bright Blue Green Yellow Red Salmon Orange Dark Gray Divider Gray Medium Gray Button Gray Background Gray Drawer Gray White
<span class="text-black">Black</span>
<span class="text-blue">Blue</span>
<span class="text-bright-blue">Bright Blue</span>
<span class="text-green">Green</span>
<span class="text-yellow">Yellow</span>
<span class="text-red">Red</span>
<span class="text-salmon">Salmon</span>
<span class="text-orange">Orange</span>
<!-- White background is only for demo purposes -->
<span style="background-color: white;">
  <span class="text-dark-gray">Dark Gray</span>
  <span class="text-divider-gray">Divider Gray</span>
  <span class="text-medium-gray">Medium Gray</span>
  <span class="text-button-gray">Button Gray</span>
  <span class="text-background-gray">Background Gray</span>
  <span class="text-drawer-gray">Drawer Gray</span>
</span>
<!-- Black background is only for demo purposes -->
<span style="background-color: black;">
<span class="text-white">White</span></span>

Text Alignment

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Monospace Font

Add the monospace class for places where you need a monospace font.

<input type="text" class="monospace" value="0oO1l">