Typography

  1. Home
  2. Components
  3. Typography
Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

<h1 class="text-4xl">H1 Heading</h1>

<h2 class="text-3xl">H2 Heading</h2>

<h3 class="text-2xl">H3 Heading</h3>

<h4 class="text-xl">H4 Heading</h4>

<h5 class="text-lg">H5 Heading</h5>

<h6 class="text-base">H6 Heading</h6>
Text
Default

The quick brown fox jumps over the lazy dog.

Underline

The quick brown fox jumps over the lazy dog.

Italic

The quick brown fox jumps over the lazy dog.

Overline

The quick brown fox jumps over the lazy dog.

line through

The quick brown fox jumps over the lazy dog.


<p>The quick brown fox jumps over the lazy dog.</p>

<p class="underline">The quick brown fox jumps over the lazy dog.</p>

<p class="italic">The quick brown fox jumps over the lazy dog.</p>

<p class="overline">The quick brown fox jumps over the lazy dog.</p>

<p class="line-through">The quick brown fox jumps over the lazy dog.</p>
Font weight
Normal Default

The quick brown fox jumps over the lazy dog.

Medium

The quick brown fox jumps over the lazy dog.

Semibold

The quick brown fox jumps over the lazy dog.

Bold

The quick brown fox jumps over the lazy dog.


<p>The quick brown fox jumps over the lazy dog.</p>

<p class="font-medium">The quick brown fox jumps over the lazy dog.</p>

<p class="font-medium">The quick brown fox jumps over the lazy dog.</p>

<p class="font-medium">The quick brown fox jumps over the lazy dog.</p>
List
list-disc
  • Now this is a story all about how, my life got flipped-turned upside down
  • Lorem ipsum is placeholder text commonly used in the graphic
  • Publishing industries for previewing layouts and visual mockups.
list-decimal
  • Now this is a story all about how, my life got flipped-turned upside down
  • Lorem ipsum is placeholder text commonly used in the graphic
  • Publishing industries for previewing layouts and visual mockups.
list-none
  • Now this is a story all about how, my life got flipped-turned upside down
  • Lorem ipsum is placeholder text commonly used in the graphic
  • Publishing industries for previewing layouts and visual mockups.
Custom Icon
  • 24/7 Support
  • Lifetime free updates
  • New demos weekly

<ul class="list-disc">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    <li>Lorem ipsum is placeholder text commonly used in the graphic</li>
    <li>Publishing industries for previewing layouts and visual mockups.</li>
</ul>

<ul class="list-decimal">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    <li>Lorem ipsum is placeholder text commonly used in the graphic</li>
    <li>Publishing industries for previewing layouts and visual mockups.</li>
</ul>

<ul class="list-none">
    <li>Now this is a story all about how, my life got flipped-turned upside down</li>
    <li>Lorem ipsum is placeholder text commonly used in the graphic</li>
    <li>Publishing industries for previewing layouts and visual mockups.</li>
</ul>

<ul class="space-y-2">
    <li class="flex items-center">
        <span class="icon-[lucide--check] text-xl me-2 text-primary"></span>
        24/7 Support
    </li>
    <li class="flex items-center">
        <span class="icon-[lucide--check] text-xl me-2 text-primary"></span>
        Lifetime free updates
    </li>
    <li class="flex items-center">
        <span class="icon-[lucide--check] text-xl me-2 text-primary"></span>
        New demos weekly
    </li>
</ul>
Text overflow
Truncate

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

Ellipsis

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis

Line Clamp

The longest word in any of the major English language dictionaries is a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis


<p class="max-w-xs truncate">The longest word in any of the major English language dictionaries is 
    <span class="font-medium">pneumonoultramicroscopicsilicovolcanoconiosis,</span>
    a word that refers to a lung disease
    contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same
    as silicosis.</p>

<p class="max-w-xs overflow-hidden text-ellipsis">
    The longest word in any of the major English language dictionaries is 
    <span class="font-medium">pneumonoultramicroscopicsilicovolcanoconiosis,</span>
    a word that refers to a lung disease
    contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same
    as silicosis
</p>

<p class="max-w-xs overflow-hidden line-clamp-2">
    The longest word in any of the major English language dictionaries is a word that refers to a lung disease
    contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same
    as silicosis
</p>