Typography

HTML Headings

All HTML headings, <h1> through <h6>,are available. .h1 through .h6 are also available, for when you want to match the font styling of a heading.

Preview

Font Size

H1. Heading

2.5rem

H2. Heading

2rem

H3. Heading

1.75rem

H4. Heading

1.5rem

H5. Heading

1.25rem

H6. Heading

1rem

Light or Bold Headings

All HTML headings are available with light and bold font-weight. Use .text-bold-400 for light heading and .text-bold-600 for bold headings alongwith heading tags or classes.

Light Headings

Bold Headings

H1. Heading

H1. Heading

H2. Heading

H2. Heading

H3. Heading

H3. Heading

H4. Heading

H4. Heading

H5. Heading
H5. Heading
H6. Heading
H6. Heading

Display Headings

Traditional heading elements are designed to work best in the meet of your page content. When you need a heading to stand out, consider using a display heading — a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

Blockquotes

You can use .text-center or .text-right to change the alignment of your blockquote.

Cupcake ipsum dolor sit amet. Tart toffee cheesecake cupcake. Marshmallow oat cake jujubes macaroon. Carrot cake biscuit bonbon.

Naming a source

Add <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.

Cupcake ipsum dolor. Sit amet sesame snaps tiramisu. Marzipan topping gummies pudding.

Someone famous in Source Title

Blockquotes styling

Add .border-left-{color}.border-left-3 to have a left border of 3px, where color can be any color from Apex Admin color palette. You can also do it for right border.

Cupcake ipsum dolor sit amet halvah. Cake jelly chupa chups jelly-o jujubes macaroon. Icing sesame snaps jelly.

Someone famous in Source Title

Brownie bear claw dragée macaroon powder. Gummi bears sweet caramels cupcake gummi bears halvah jelly-o chocolate. Carrot cake carrot cake danish liquorice wafer sweet candy carrot cake marshmallow. Tiramisu jujubes macaroon cookie cupcake.

Someone famous in Source Title

Carrot cake chocolate cake fruitcake jelly beans biscuit jelly-o muffin. Lemon drops biscuit lollipop sweet roll bear claw chocolate cake oat cake sweet roll. Topping tiramisu candy canes jujubes icing macaroon cotton candy danish tiramisu.

Someone famous in Source Title

Blockquotes with Avatar

You can use media object inside blockquote and can also customize image type, border alignment & style.

Generic placeholder image
Cupcake ipsum dolor sit amet icing. Caramels sesame snaps sesame snaps halvah candy wafer. Danish sugar plum marzipan sugar plum jelly beans.
Someone famous in Source Title
Generic placeholder image
Cupcake ipsum dolor sit. Amet chocolate bar gummi bears toffee. Caramels lollipop topping sesame snaps liquorice jelly beans marzipan.
Someone famous in Source Title
Cupcake ipsum dolor sit amet halvah. Cake jelly chupa chups jelly-o jujubes macaroon. Icing sesame snaps jelly.
Generic placeholder image
Someone famous in Source Title
Lists

Unstyled List

Use .list-unstyled for unstyled list. It removes the default list-style and left margin on list items. This only applies to immediate children list items, meaning you will need to add the class for any nested list as well.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unordered List

List of items in which the order does not explicitly matter. Use .list-style-circle or .list-style-square in unordered list to add circle or square bullet points.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered List

List of items in which the order does explicitly matter. Use <ol type="1|a|A|i|I">, The type attribute specifies the kind of marker to use in the list.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Lists icons

list of terms with icons, use .list-style-icons class. You can use any icon from Apex Admin icon types.

  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc

Inline List

Remove a list’s bullets and apply some light margin with a combination of .list-inline and .list-inline-item.

Use inline numbers, alphabet, icons etc... for ordered Inline List.

  • Chocolate
  • Cake
  • Ice-Cream
  • 1. Chocolate
  • 2. Cake
  • 3. Ice-Cream
  • Facebook
  • Twitter
  • Instagram
Description List Alignment

Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add .text-truncate to truncate the text with an ellipsis.

Description list Horizontal

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Description list Vertical

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Description list Horizontal

Description lists with right aligned text in <dt> tag using .text-right

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.