Typography

Heading

All HTML headings are available from h1 to h6 for desire heading.

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6 
<div class="flex flex-col gap-2">
  <h1 class="text-3xl"> This is a Heading 1 </h1> 
  <h2 class="text-2xl"> This is a Heading 2 </h2>
  <h3 class="text-xl"> This is a Heading 3 </h3> 
  <h4 class="text-lg"> This is a Heading 4 </h4> 
  <h5 class="text-base"> This is a Heading 5 </h5> 
  <h6 class="text-sm"> This is a Heading 6 </h6>
</div>

Sub Heading

For all HTML heading h1 to h6 has available sub heading.

Heading 1 Sub Heading

Heading 2 Sub Heading

Heading 3 Sub Heading

Heading 4 Sub Heading

Heading 5 Sub Heading
Heading 6 Sub Heading
 <div class="flex flex-col gap-2"> 
  <h1 class="text-3xl text-primary"> Heading 1 <small class="text-title"> Sub Heading </small></h1> 
  <h2 class="text-2xl text-secondary"> Heading 2 <small class="text-title"> Sub Heading </small></h2>
  <h3 class="text-xl text-info"> Heading 3 <small class="text-title"> Sub Heading </small></h3> 
  <h4 class="text-lg text-success"> Heading 4 <small class="text-title"> Sub Heading </small></h4> 
  <h5 class="text-base text-warning"> Heading 5 <small class="text-title"> Sub Heading </small></h5> 
  <h6 class="text-sm text-danger"> Heading 6 <small class="text-title"> Sub Heading </small></h6>
</div>

Font Weight

Using .font-* class, you can add font weight to the text.

It's black font weight Heading 1

It's bold font weight Heading 2

It's semibold font weight Heading 3

It's normal font weight Heading 4

It's light font weight Heading 5
It's extralight font weight Heading 6 
 <div class="flex flex-col gap-2"> 
  <h1 class="font-black"> It's black font weight Heading 1 </h1> 
  <h2 class="font-bold"> It's bold font weight Heading 2 </h2>
  <h3 class="font-semibold"> It's semibold font weight Heading 3 </h3> 
  <h4 class="font-normal"> It's normal font weight Heading 4 </h4> 
  <h5 class="font-light"> It's light font weight Heading 5 </h5> 
  <h6 class="font-extralight"> It's extralight font weight Heading 6 </h6>
</div>

Colored Text

Set the text color using .text-* class.

This is primary heading 1, you can add using .text-primary class.

This is secondary heading 2, you can add using .text-secondary class.

This is info heading 3, you can add using .text-info class.

This is success heading 4, you can add using .text-success class.

This is warning heading 5, you can add using .text-warning class.

This is danger heading 6, you can add using .text-danger class.

 <div class="flex flex-col gap-2"> 
   <p class="text-primary"> This is primary heading 1, you can add using
       <code class="font-black">.text-primary</code></p> 
   <p class="text-secondary"> This is secondary heading 2, you can add using
       <code class="font-black">.text-secondary</code></p>
   <p class="text-info"> This is info heading 3, you can add using
       <code class="font-black">.text-info</code></p> 
   <p class="text-success"> This is success heading 4, you can add using
       <code class="font-black">.text-success</code></p> 
   <p class="text-warning"> This is warning heading 5, you can add using
       <code class="font-black">.text-warning</code></p> 
   <p class="text-danger"> This is danger heading 6, you can add using
       <code class="font-black">.text-danger</code></p>                                
</div>

Inline Text Elements

Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

 <div class="flex flex-col gap-2"> 
  <p> You can use the mark tag to <mark>highlight</mark>text.</p> 
  <p><del>This line of text is meant to be treated as deleted text.</del></p>
  <p><u>This line of text will render as underlined.</u></p>
  <p><small>This line of text is meant to be treated as fine print.</small></p>
  <p><strong>This line rendered as bold text.</strong></p>
  <p><em>This line rendered as italicized text.</em></p>                              
</div>

Unordered List

For list-styling you can use Unordered list using ul and li.

  • Click here, for more latest News!!
  • Click here, for more info!
  • Hurry, you got the first price
  • Surprise!!!
  • Here, you can get the more about us
  • Today is the best for you!!
  • Let's friday night!!
  • click on, for new update!
  • Coding Language
 <div>
  <ul class="pl-4 text-gray-500 list-disc">
      <li class="mt-2 first:mt-0"> Click here, for more latest News!! </li>
      <li class="mt-2 first:mt-0"> Click here, for more info! </li>
      <li class="mt-2 first:mt-0"> Hurry, you got the first price </li>
      <li class="mt-2 first:mt-0"> Surprise!!! </li>
      <li class="mt-2 first:mt-0"> Here, you can get the more about us </li>
      <li class="mt-2 first:mt-0"> Today is the best for you!! </li>
      <li class="mt-2 first:mt-0"> Let's friday night!! </li>
      <li class="mt-2 first:mt-0"> click on, for new update! </li>
      <li class="mt-2 first:mt-0"> Coding Language </li>
  </ul>
</div>

Order List

For list-styling you can use order list using ol and li.

  1. Ui kits
  2. Bonus ui
    1. Breadcrumb
    2. Carousel
    3. Countdown
    4. Indicator
  4. Icon
  5. Apex Chart
  6. Chat
 <div>
  <ol class="pl-4 text-gray-500 list-decimal">
      <li class="mt-2 first:mt-0"> Ui kits </li>
      <li class="mt-2 first:mt-0"> Bonus ui </li>
      <li class="mt-2 first:mt-0">
          <ol class="pl-4 text-gray-500 list-decimal">
              <li class="mt-2 first:mt-0"> Breadcrumb </li>
              <li class="mt-2 first:mt-0"> Carousel </li>
              <li class="mt-2 first:mt-0"> Countdown </li>
              <li class="mt-2 first:mt-0"> Indicator </li>
          </ol>
      </li>
      <li class="mt-2 first:mt-0"> Icon </li>
      <li class="mt-2 first:mt-0"> Apex Chart </li>
      <li class="mt-2 first:mt-0"> Chat </li>
  </ol>
</div>

Description List

For list-styling you can use Description list using dl and dt.

The way to get started is to quit talking and begin doing.
- Walt Disney
Life is what happens when you're busy making other plans.
- John Lennon
Whoever is happy will make others happy too.
- Anne Frank
Life is either a daring adventure or nothing at all.
- IHelen Keller
The purpose of our lives is to be happy.
- Dalai Lama
 <div>
  <dl class="text-xs>
      <dt class="mt-2 first:mt-0"> The way to get started is to quit talking and begin doing. </dt>
      <dd class="ml-5 text-gray-500">- Walt Disney</dd>
      <dt class="mt-2 first:mt-0"> Life is what happens when you're busy making other plans. </dt>
      <dd class="ml-5 text-gray-500">- John Lennon </dd>
      <dt class="mt-2 first:mt-0"> Whoever is happy will make others happy too. </dt>
      <dd class="ml-5 text-gray-500">- Anne Frank </dd>
      <dt class="mt-2 first:mt-0"> Life is either a daring adventure or nothing at all. </dt>
      <dd class="ml-5 text-gray-500">- IHelen Keller </dd>
      <dt class="mt-2 first:mt-0"> The purpose of our lives is to be happy. </dt>
      <dd class="ml-5 text-gray-500">- Dalai Lama </dd>
  </dl>
</div>

Alignment

Set the text alignment using .text-* class.

Alignment Left

You can set start alignment of the text using text-start.

Alignment Center

You can set center alignment of the text using text-center.

Alignment Right

You can set end alignment of the text using text-end.

 <div class="flex flex-col gap-2">
  <div>
      <h4 class="text-sm font-semibold text-title text-start"> Alignment Left </h4>
      <p class="text-content text-start"> You can set start alignment of the text using 
          <strong>text-start.</strong></p> 
  </div>
  <div>
      <h4 class="text-sm font-semibold text-center text-title"> Alignment Center </h4>
      <p class="text-center"> You can set start alignment of the text using 
          <strong>text-center.</strong></p>
  </div>
  <div>
      <h4 class="text-sm font-semibold text-title text-end"> Alignment Right </h4>
      <p class="text-end"> You can set start alignment of the text using 
          <strong>text-end.</strong></p> 
  </div>
</div>

Blockquote

Set the blockquote using .text-* class.

The only journey that is impossible is the one you never set out on.

- Tony Robbins

Live in the sunshine, swim the sea, drink the wild air.

- Ralph Waldo Emerson 
 <div class="flex flex-col gap-2"> 
  <blockquote class="p-2 border-l-4 text-start border-primary bg-primary-light text-primary">
      <p class="mb-1">The only journey that is impossible is the one you never set out on.</p>
  <blockquote-footer><cite title="Source Title">< - Tony Robbins></blockquote-footer> 
  </blockquote> 
  <blockquote class="p-2 border-l-4 text-end border-secondary bg-secondary-extralight text-secondary">
      <p class="mb-1">Live in the sunshine, swim the sea, drink the wild air.</p>
  <blockquote-footer><cite title="Source Title">< - Ralph Waldo Emerson></blockquote-footer> 
  </blockquote>                        
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode