Documentation

Vue

Typography

Display Heading

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

<div>
  <p class="mb-4 font-light text-gray-600 md:text-8xl text-7xl">Display 1</p>
  <p class="mb-4 text-6xl font-light text-gray-600 md:text-7xl">Display 2</p>
  <p class="mb-4 text-5xl font-light text-gray-600 md:text-6xl">Display 3</p>
  <p class="mb-4 text-4xl font-light text-gray-600 md:text-5xl">Display 4</p>
  <p class="mb-4 text-3xl font-light text-gray-600 md:text-4xl">Display 5</p>
  <p class="mb-4 text-2xl font-light text-gray-600 md:text-3xl">Display 6</p>
</div>

Display Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<div class="mt-4">
  <p class="text-4xl font-medium">Heading 1</p>
  <p class="text-3xl font-medium">Heading 2</p>
  <p class="text-2xl font-medium">Heading 3</p>
  <p class="text-xl font-medium">Heading 4</p>
  <p class="text-lg font-medium">Heading 5</p>
  <p class="text-base font-medium">Heading 6</p>
</div>

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 is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

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="mt-4">
  <p class="mb-4">You can use the mark tag to <mark>highlight</mark> text.</p>
  <p class="mb-4"><del>This line of text is meant to be treated as deleted text.</del></p>
  <p class="mb-4"><s>This line of text is meant to be treated as no longer accurate.</s></p>
  <p class="mb-4"><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
  <p class="mb-4"><u>This line of text will render as underlined.</u></p>
  <p class="mb-4"><small>This line of text is meant to be treated as fine print.</small></p>
  <p class="mb-4"><strong>This line rendered as bold text.</strong></p>
  <p class="mb-4"><em>This line rendered as italicized text.</em></p>
</div>