Typography

Heading & text styles

Style token	CSS class	Semantic tag	Font size	Line height	Font weight	Description
h1	text-h1	h1	36px	44px	600	Heading type 1
h2	text-h2	h2	28px	36px	600	Heading type 2
h3	text-h3	h3	22px	30px	600	Heading type 3
h4	text-h4	h4	18px	26px	600	Heading type 4
h5	text-h5	h5	16px	24px	600	Heading type 5
h6	text-h6	h6	14px	20px	600	Heading type 6
body-xl	text-xl	p	20px	28px	400	Extra small text
body-lg	text-lg	p	18px	28px	400	Extra small text
body-md	text-md	p	16px	20px	400	Paragraph text - default
body-sm	text-sm	p	14px	20px	400	Extra small text
body-xs	text-xs	p	12px	16px	400	Extra small text

Style with HTML tags

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph text

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph text</p>

Style with CSS classes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Extra large paragraph text

Large paragraph text

Default paragraph text

Small paragraph text

Extra small paragraph text

<p class="text-h1">Heading 1</p>
<p class="text-h2">Heading 2</p>
<p class="text-h3">Heading 3</p>
<p class="text-h4">Heading 4</p>
<p class="text-h5">Heading 5</p>
<p class="text-h6">Heading 6</p>
<p class="text-xl">Extra large paragraph text</p>
<p class="text-lg">Large paragraph text</p>
<p>Default paragraph text</p>
<p class="text-sm">Small paragraph text</p>
<p class="text-xs">Extra small paragraph text</p>

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Inline text elements

This line rendered as bold text.

This line rendered as italicized text.

This line rendered as underlined text.

<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p><u>This line rendered as underlined text.</u></p>

Link

Link

<p>
  <a
    href="#"
    class="font-medium text-primary-400 hover:underline"
  >
    Link
  </a>
</p>

List

Unordered list

• List item 1
• List item 2
• List item 3

<ul class="list-disc list-inside">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Ordered list

1. List item 1
2. List item 2
3. List item 3

<ol class="list-decimal list-inside">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

Blockquote

A well-known quote, contained in a blockquote element.

Someone famous

Source Title

<blockquote class="p-4 my-4 border-s-4 border-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
  <p class="text-xl italic font-medium leading-relaxed text-gray-900 dark:text-white-500">
    A well-known quote, contained in a blockquote element.
  </p>

  <figcaption class="flex items-center mt-6 space-x-3 rtl:space-x-reverse">
    <div class="flex items-center divide-x rtl:divide-x-reverse divide-gray-300 dark:divide-gray-700">
      <cite class="pe-3 font-medium text-gray-600 dark:text-gray-300">
        Someone famous
      </cite>

      <cite class="ps-3 text-sm text-gray-500 dark:text-gray-400">
        Source Title
      </cite>
    </div>
  </figcaption>
</blockquote>