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="mt-3 text-3xl font-medium leading-none"HTMLCloseTag
                                    h2. Heading 2
                                HTMLOpenTag/h2HTMLCloseTag
                                HTMLOpenTagh3 class="mt-3 text-2xl font-medium leading-none"HTMLCloseTag
                                    h3. Heading 3
                                HTMLOpenTag/h3HTMLCloseTag
                                HTMLOpenTagh4 class="mt-3 text-xl font-medium leading-none"HTMLCloseTag
                                    h4. Heading 4
                                HTMLOpenTag/h4HTMLCloseTag
                                HTMLOpenTagh5 class="mt-3 text-lg font-medium leading-none"HTMLCloseTag
                                    h5. Heading 5
                                HTMLOpenTag/h5HTMLCloseTag
                                HTMLOpenTagh6 class="mt-3 font-medium leading-none"HTMLCloseTagh6. Heading 6HTMLOpenTag/h6HTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-5"HTMLCloseTag
                                HTMLOpenTagh1 class="text-4xl font-medium leading-none text-primary"HTMLCloseTag
                                    h1. Heading 1
                                HTMLOpenTag/h1HTMLCloseTag
                                HTMLOpenTagh2 class="mt-3 text-3xl font-medium leading-none text-slate-600 dark:text-slate-500"HTMLCloseTag
                                    h2. Heading 2
                                HTMLOpenTag/h2HTMLCloseTag
                                HTMLOpenTagh3 class="mt-3 text-2xl font-medium leading-none text-success"HTMLCloseTag
                                    h3. Heading 3
                                HTMLOpenTag/h3HTMLCloseTag
                                HTMLOpenTagh4 class="mt-3 text-xl font-medium leading-none text-warning"HTMLCloseTag
                                    h4. Heading 4
                                HTMLOpenTag/h4HTMLCloseTag
                                HTMLOpenTagh5 class="mt-3 text-lg font-medium leading-none text-danger"HTMLCloseTag
                                    h5. Heading 5
                                HTMLOpenTag/h5HTMLCloseTag
                                HTMLOpenTagh6 class="mt-3 font-medium leading-none text-slate-500"HTMLCloseTag
                                    h6. Heading 6
                                HTMLOpenTag/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.

            
                HTMLOpenTagdivHTMLCloseTag
                                You can use the mark tag to
                                HTMLOpenTagmark class="bg-yellow-200 p-1"HTMLCloseTaghighlightHTMLOpenTag/markHTMLCloseTag text.
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdel class="mt-1 block"HTMLCloseTagThis line of text is meant to be treated as deleted text.HTMLOpenTag/delHTMLCloseTag
                            HTMLOpenTags class="mt-1 block"HTMLCloseTagThis line of text is meant to be treated as no longer
                                accurate.HTMLOpenTag/sHTMLCloseTag
                            HTMLOpenTagins class="mt-1 block"HTMLCloseTagThis line of text is meant to be treated as an addition to the
                                document.HTMLOpenTag/insHTMLCloseTag
                            HTMLOpenTagu class="mt-1 block"HTMLCloseTagThis line of text will render as underlinedHTMLOpenTag/uHTMLCloseTag
                            HTMLOpenTagsmall class="mt-1 block"HTMLCloseTagThis line of text is meant to be treated as fine print.HTMLOpenTag/smallHTMLCloseTag
                            HTMLOpenTagstrong class="mt-1 block"HTMLCloseTagThis line rendered as bold text.HTMLOpenTag/strongHTMLCloseTag
                            HTMLOpenTagem class="mt-1 block"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="mr-1 rounded-full bg-primary px-1 text-xs text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full border px-1 text-xs text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-success px-1 text-xs text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-warning px-1 text-xs text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-danger px-1 text-xs text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full bg-slate-100 px-1 text-xs text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-6 font-medium"HTMLCloseTagBadge SizesHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-primary px-2 py-1 text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full border px-2 py-1 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-success px-2 py-1 text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-warning px-2 py-1 text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-danger px-2 py-1 text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full bg-slate-100 px-2 py-1 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-4"HTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-primary px-3 py-2 text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full border px-3 py-2 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-success px-3 py-2 text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-warning px-3 py-2 text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-danger px-3 py-2 text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full bg-slate-100 px-3 py-2 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-6"HTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-primary px-4 py-3 text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full border px-4 py-3 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-success px-4 py-3 text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-warning px-4 py-3 text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 rounded-full bg-danger px-4 py-3 text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full bg-slate-100 px-4 py-3 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-10 font-medium"HTMLCloseTagSquare BadgeHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-2"HTMLCloseTag
                                HTMLOpenTagspan class="mr-1 bg-primary px-1 text-xs text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 border px-1 text-xs text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 bg-success px-1 text-xs text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 bg-warning px-1 text-xs text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan class="mr-1 bg-danger px-1 text-xs text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 bg-slate-100 px-1 text-xs text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-6 font-medium"HTMLCloseTagOutline BadgeHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-4"HTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full border border-primary px-3 py-2 text-primary dark:border-primary"
                                HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full border px-3 py-2 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full border border-success px-3 py-2 text-success dark:border-success"
                                HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full border border-warning px-3 py-2 text-warning dark:border-warning"
                                HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                HTMLOpenTagspan
                                    class="mr-1 rounded-full border border-danger px-3 py-2 text-danger dark:border-danger"
                                HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag

Separator

Show example code

            
                HTMLOpenTagdiv class="w-full border-t border-dashed border-slate-200/60 dark:border-darkmode-400"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-5 w-full border-t border-slate-200/60 dark:border-darkmode-400"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag

Divider

Show example code

            
                HTMLOpenTagdiv
                                class="mt-2 flex w-full justify-center border-t border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag
                                HTMLOpenTagdiv class="-mt-3 bg-white px-5 text-slate-500 dark:bg-darkmode-600"HTMLCloseTag
                                    or
                                HTMLOpenTag/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
                                    class="block font-normal text-primary"
                                    href=""
                                HTMLCloseTagExample textHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTaga
                                    class="block font-medium text-primary"
                                    href=""
                                HTMLCloseTagExample medium textHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTaga
                                    class="block font-semibold text-primary"
                                    href=""
                                HTMLCloseTagExample semibold textHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTaga
                                    class="block font-bold text-primary"
                                    href=""
                                HTMLCloseTagExample bolder textHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTaga
                                    class="block font-extrabold text-primary"
                                    href=""
                                HTMLCloseTagExample boldest textHTMLOpenTag/aHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-5"HTMLCloseTag
                                HTMLOpenTaga
                                    class="block text-primary"
                                    href=""
                                HTMLCloseTagPrimary stateHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTaga
                                    class="block text-slate-600 dark:text-slate-500"
                                    href=""
                                HTMLCloseTagSecondary stateHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTaga
                                    class="block text-success"
                                    href=""
                                HTMLCloseTagSuccess stateHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTaga
                                    class="block text-warning"
                                    href=""
                                HTMLCloseTagWarning stateHTMLOpenTag/aHTMLCloseTag
                                HTMLOpenTaga
                                    class="block text-danger"
                                    href=""
                                HTMLCloseTagDanger stateHTMLOpenTag/aHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag