Rubick Bootstrap HTML Admin Template
Rubick Tailwind HTML Admin Template Rubick

Typography

Heading

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="fs-4xl fw-medium lh-1"HTMLCloseTagh1. Heading 1HTMLOpenTag/h1HTMLCloseTag HTMLOpenTagh2 class="fs-3xl fw-medium lh-1 mt-3"HTMLCloseTagh2. Heading 2HTMLOpenTag/h2HTMLCloseTag HTMLOpenTagh3 class="fs-2xl fw-medium lh-1 mt-3"HTMLCloseTagh3. Heading 3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTagh4 class="fs-xl fw-medium lh-1 mt-3"HTMLCloseTagh4. Heading 4HTMLOpenTag/h4HTMLCloseTag HTMLOpenTagh5 class="fs-lg fw-medium lh-1 mt-3"HTMLCloseTagh5. Heading 5HTMLOpenTag/h5HTMLCloseTag HTMLOpenTagh6 class="fw-medium lh-1 mt-3"HTMLCloseTagh6. Heading 6HTMLOpenTag/h6HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagh1 class="fs-4xl text-theme-1 fw-medium lh-1"HTMLCloseTagh1. Heading 1HTMLOpenTag/h1HTMLCloseTag HTMLOpenTagh2 class="fs-3xl text-gray-700 dark-text-gray-600 fw-medium lh-1 mt-3"HTMLCloseTagh2. Heading 2HTMLOpenTag/h2HTMLCloseTag HTMLOpenTagh3 class="fs-2xl text-theme-9 fw-medium lh-1 mt-3"HTMLCloseTagh3. Heading 3HTMLOpenTag/h3HTMLCloseTag HTMLOpenTagh4 class="fs-xl text-theme-12 fw-medium lh-1 mt-3"HTMLCloseTagh4. Heading 4HTMLOpenTag/h4HTMLCloseTag HTMLOpenTagh5 class="fs-lg text-theme-6 fw-medium lh-1 mt-3"HTMLCloseTagh5. Heading 5HTMLOpenTag/h5HTMLCloseTag HTMLOpenTagh6 class="text-gray-600 fw-medium lh-1 mt-3"HTMLCloseTagh6. Heading 6HTMLOpenTag/h6HTMLCloseTag HTMLOpenTag/divHTMLCloseTag  

Text Settings

Example text light
Example text
Example medium text
Example bold text
Example bolder text
Example uppercase text
Example lowercase text
Example capitalized text
  HTMLOpenTagdivHTMLCloseTag HTMLOpenTagdiv class="fw-light"HTMLCloseTagExample text lightHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="fw-normal"HTMLCloseTagExample textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="fw-medium"HTMLCloseTagExample medium textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="fw-bold"HTMLCloseTagExample bold textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="fw-bolder"HTMLCloseTagExample bolder textHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagdiv class="text-uppercase"HTMLCloseTagExample uppercase textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-lowercase"HTMLCloseTagExample lowercase textHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-capitalize"HTMLCloseTagExample capitalized textHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag  

Common Elements

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

Badges

Basic Badge
1 2 3 4 5 6
Badge Sizes
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6
Square Badge
1 2 3 4 5 6
Outline Badge
1 2 3 4 5
  HTMLOpenTagdiv class="fw-medium"HTMLCloseTagBasic BadgeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 rounded-pill bg-theme-1 text-white me-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 rounded-pill border text-gray-700 dark-text-gray-600 dark-border-dark-5 me-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 rounded-pill bg-theme-9 text-white me-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 rounded-pill bg-theme-12 text-white me-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 rounded-pill bg-theme-6 text-white me-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 rounded-pill bg-gray-200 text-gray-600 me-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="fw-medium mt-6"HTMLCloseTagBadge SizesHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-pill bg-theme-1 text-white me-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-pill border text-gray-700 dark-text-gray-600 dark-border-dark-5 me-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-pill bg-theme-9 text-white me-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-pill bg-theme-12 text-white me-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-pill bg-theme-6 text-white me-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-2 py-1 rounded-pill bg-gray-200 text-gray-600 me-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-4"HTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill bg-theme-1 text-white me-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill border text-gray-700 dark-text-gray-600 dark-border-dark-5 me-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill bg-theme-9 text-white me-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill bg-theme-12 text-white me-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill bg-theme-6 text-white me-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill bg-gray-200 text-gray-600 me-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-6"HTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-pill bg-theme-1 text-white me-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-pill border text-gray-700 dark-text-gray-600 dark-border-dark-5 me-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-pill bg-theme-9 text-white me-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-pill bg-theme-12 text-white me-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-pill bg-theme-6 text-white me-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-4 py-3 rounded-pill bg-gray-200 text-gray-600 me-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="fw-medium mt-10"HTMLCloseTagSquare BadgeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 bg-theme-1 text-white me-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 border text-gray-700 dark-text-gray-600 dark-border-dark-5 me-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 bg-theme-9 text-white me-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 bg-theme-12 text-white me-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 bg-theme-6 text-white me-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="fs-xs px-1 bg-gray-200 text-gray-600 me-1"HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="fw-medium mt-6"HTMLCloseTagOutline BadgeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-4"HTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill border border-theme-1 text-theme-1 dark-text-theme-9 dark-border-theme-9 me-1"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill border text-gray-700 dark-text-gray-600 dark-border-dark-5 me-1"HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill border border-theme-9 text-theme-9 dark-border-theme-9 me-1"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill border border-theme-12 text-theme-12 dark-border-theme-12 me-1"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag HTMLOpenTagspan class="px-3 py-2 rounded-pill border border-theme-6 text-theme-6 dark-border-theme-6 me-1"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/divHTMLCloseTag  

Separator

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

Devider

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

Links

Dark Mode