Display

Extra Small Posh UI

Small Posh UI

Medium Posh UI

Large Posh UI

Extra Large Posh UI

Extra Extra Large Posh UI

                    
<p class="fs-xs">Extra Small Posh UI</p>
<p class="fs-sm">Small Posh UI</p>
<p class="fs-md">Medium Posh UI</p>
<p class="fs-lg">Large Posh UI</p>
<p class="fs-xl">Extra Large Posh UI</p>
<p class="fs-xxl">Extra Extra Large Posh UI</p>

Headings

h6. Posh UI heading

h5. Posh UI heading

h4. Posh UI heading

h3. Posh UI heading

h2. Posh UI heading

h1. Posh UI heading

                    
<h6 class="my-0p5">h6. Posh UI heading</h6>
<h5 class="my-0p5">h5. Posh UI heading</h5>
<h4 class="my-0p5">h4. Posh UI heading</h4>
<h3 class="my-0p5">h3. Posh UI heading</h3>
<h2 class="my-0p5">h2. Posh UI heading</h2>
<h1 class="my-0p5">h1. Posh UI heading</h1>

Alignment

Hey!👋 I am Left Aligned 😀

Hey!👋 I am Center Aligned 😀

Hey!👋 I am Right Aligned 😀

                 
<p class="text-left">Hey!👋 I am Left Aligned 😀</p>
<p class="text-center">Hey!👋 I am Center Aligned 😀</p>
<p class="text-right">Hey!👋 I am Right Aligned 😀</p>

Inline Text Elements

I am the small text😐

They colored me 😔 in gray

You can see the text-decoration:overline

You can see the text-decoration: line-through

You can see the text-decoration: underline

                 
<small>I am the small text😐</small>
<p class="text-gray-500">They colored me 😔 in gray</p>
<p class="text-overline">
  You can see the <em>text-decoration:overline</em>
</p>
<p class="text-line-through">
  You can see the <em>text-decoration: line-through</em>
</p>
<p class="text-underline">
  You can see the <em>text-decoration: underline</em>
</p>

Typography