Typography

Heading

Show example code

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTagh1 class="text-4xl font-medium leading-none"HTMLCloseTagh1. Heading 1HTMLOpenTag/h1HTMLCloseTag HTMLOpenTagh2 class="text-3xl font-medium leading-none mt-3"HTMLCloseTagh2. Heading 2HTMLOpenTag/h2HTMLCloseTag HTMLOpenTagh3 class="text-2xl font-medium leading-none mt-3"HTMLCloseTagh3. Heading 3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTagh4 class="text-xl font-medium leading-none mt-3"HTMLCloseTagh4. Heading 4HTMLOpenTag/h4HTMLCloseTag HTMLOpenTagh5 class="text-lg font-medium leading-none mt-3"HTMLCloseTagh5. Heading 5HTMLOpenTag/h5HTMLCloseTag HTMLOpenTagh6 class="font-medium leading-none mt-3"HTMLCloseTagh6. Heading 6HTMLOpenTag/h6HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagh1 class="text-4xl text-theme-1 font-medium leading-none"HTMLCloseTagh1. Heading 1HTMLOpenTag/h1HTMLCloseTag HTMLOpenTagh2 class="text-3xl text-gray-700 dark:text-gray-600 font-medium leading-none mt-3"HTMLCloseTagh2. Heading 2HTMLOpenTag/h2HTMLCloseTag HTMLOpenTagh3 class="text-2xl text-theme-9 font-medium leading-none mt-3"HTMLCloseTagh3. Heading 3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTagh4 class="text-xl text-theme-12 font-medium leading-none mt-3"HTMLCloseTagh4. Heading 4HTMLOpenTag/h4HTMLCloseTag HTMLOpenTagh5 class="text-lg text-theme-6 font-medium leading-none mt-3"HTMLCloseTagh5. Heading 5HTMLOpenTag/h5HTMLCloseTag HTMLOpenTagh6 class="text-gray-600 font-medium leading-none mt-3"HTMLCloseTagh6. Heading 6HTMLOpenTag/h6HTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Text Settings

Show example code

Example text

Example medium text

Example semibold text

Example bolder text

Example boldest text

Example uppercase text

Example lowercase text

Example capitalized text

Example cursive text

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTagdiv class="font-normal"HTMLCloseTagExample textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagExample medium textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-semibold"HTMLCloseTagExample semibold textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-bold"HTMLCloseTagExample bolder textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-extrabold"HTMLCloseTagExample boldest textHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagdiv class="uppercase"HTMLCloseTagExample uppercase textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="lowercase"HTMLCloseTagExample lowercase textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="capitalize"HTMLCloseTagExample capitalized textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="normal-case"HTMLCloseTagExample cursive textHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Common Elements

Show example code

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.

  HTMLOpenTagdiv class=""HTMLCloseTagYou can use the mark tag to HTMLOpenTagmark class="p-1 bg-yellow-200"HTMLCloseTaghighlightHTMLOpenTag/markHTMLCloseTag text.HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdel class="block mt-1"HTMLCloseTagThis line of text is meant to be treated as deleted text.HTMLOpenTag/delHTMLCloseTag HTMLOpenTags class="block mt-1"HTMLCloseTagThis line of text is meant to be treated as no longer accurate.HTMLOpenTag/sHTMLCloseTag HTMLOpenTagins class="block mt-1"HTMLCloseTagThis line of text is meant to be treated as an addition to the document.HTMLOpenTag/insHTMLCloseTag HTMLOpenTagu class="block mt-1"HTMLCloseTagThis line of text will render as underlinedHTMLOpenTag/uHTMLCloseTag HTMLOpenTagsmall class="block mt-1"HTMLCloseTagThis line of text is meant to be treated as fine print.HTMLOpenTag/smallHTMLCloseTag HTMLOpenTagstrong class="block mt-1"HTMLCloseTagThis line rendered as bold text.HTMLOpenTag/strongHTMLCloseTag HTMLOpenTagem class="block mt-1"HTMLCloseTagThis line rendered as italicized text.HTMLOpenTag/emHTMLCloseTag

Badges

Show example code

Basic Badge

1 2 3 4 5 6

Badge Sizes

1 2 3 4 5 6

Square Badge

1 2 3 4 5 6

Outline Badge

1 2 3 4 5

  HTMLOpenTagdiv class="font-medium"HTMLCloseTagBasic BadgeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full bg-theme-1 text-white mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full bg-theme-9 text-white mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full bg-theme-12 text-white mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full bg-theme-6 text-white mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 rounded-full bg-gray-200 text-gray-600 mr-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-medium mt-6"HTMLCloseTagBadge SizesHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full bg-theme-1 text-white mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full bg-theme-9 text-white mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full bg-theme-12 text-white mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full bg-theme-6 text-white mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-full bg-gray-200 text-gray-600 mr-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-4"HTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full bg-theme-1 text-white mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full bg-theme-9 text-white mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full bg-theme-12 text-white mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full bg-theme-6 text-white mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full bg-gray-200 text-gray-600 mr-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-6"HTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full bg-theme-1 text-white mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full bg-theme-9 text-white mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full bg-theme-12 text-white mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full bg-theme-6 text-white mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-full bg-gray-200 text-gray-600 mr-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-medium mt-10"HTMLCloseTagSquare BadgeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagspan class="text-xs px-1 bg-theme-1 text-white mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 bg-theme-9 text-white mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 bg-theme-12 text-white mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 bg-theme-6 text-white mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="text-xs px-1 bg-gray-200 text-gray-600 mr-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-medium mt-6"HTMLCloseTagOutline BadgeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-4"HTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border border-theme-1 text-theme-1 dark:text-theme-10 dark:border-theme-10 mr-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border border-theme-9 text-theme-9 dark:border-theme-9 mr-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border border-theme-12 text-theme-12 dark:border-theme-12 mr-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-full border border-theme-6 text-theme-6 dark:border-theme-6 mr-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Separator

Show example code

  HTMLOpenTagdiv class="w-full border-t border-gray-200 dark:border-dark-5 border-dashed"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full border-t border-gray-200 dark:border-dark-5 mt-5"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag

Devider

Show example code

  HTMLOpenTagdiv class="w-full flex justify-center border-t border-gray-200 dark:border-dark-5 mt-2"HTMLCloseTag HTMLOpenTagdiv class="bg-white dark:bg-dark-3 px-5 -mt-3 text-gray-600"HTMLCloseTagorHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Links

Show example code

Example text Example medium text Example semibold text Example bolder text Example boldest text

Primary state Secondary state Success state Warning state Danger state

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTaga href="" class="text-theme-1 block font-normal"HTMLCloseTagExample textHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-theme-1 block font-medium"HTMLCloseTagExample medium textHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-theme-1 block font-semibold"HTMLCloseTagExample semibold textHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-theme-1 block font-bold"HTMLCloseTagExample bolder textHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-theme-1 block font-extrabold"HTMLCloseTagExample boldest textHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTaga href="" class="text-theme-1 block"HTMLCloseTagPrimary stateHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-gray-700 dark:text-gray-600 block"HTMLCloseTagSecondary stateHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-theme-9 block"HTMLCloseTagSuccess stateHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-theme-12 block"HTMLCloseTagWarning stateHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="text-theme-6 block"HTMLCloseTagDanger stateHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag