Heading styles
Default heading sizes and font weightsThin headings
H1 Heading Thin 25px
H2 Heading Thin 23px
H3 Heading Thin 21px
H4 Heading Thin 19px
H5 Heading Thin 17px
H6 Heading Thin 15px
Semibold headings
H1 Heading Semibold 25px
H2 Heading Semibold 23px
H3 Heading Semibold 21px
H4 Heading Semibold 19px
H5 Heading Semibold 17px
H6 Heading Semibold 15px
Light headings
H1 Heading Light 25px
H2 Heading Light 23px
H3 Heading Light 21px
H4 Heading Light 19px
H5 Heading Light 17px
H6 Heading Light 15px
Semibold headings
H1 Heading Bold 25px
H2 Heading Bold 23px
H3 Heading Bold 21px
H4 Heading Bold 19px
H5 Heading Bold 17px
H6 Heading Bold 15px
Regular headings
H1 Heading Regular 25px
H2 Heading Regular 23px
H3 Heading Regular 21px
H4 Heading Regular 19px
H5 Heading Regular 17px
H6 Heading Regular 15px
Black headings
H1 Heading Black 25px
H2 Heading Black 23px
H3 Heading Black 21px
H4 Heading Black 19px
H5 Heading Black 17px
H6 Heading Black 15px
Heading elements
Optional icons, labels and badgesLeft heading icon
Lefticon Left positioned heading icon
Right inline icon
Rightinline icon Right inline icon position
Right floating icon
Rightfloating icon Right floating icon
Left heading label
NewLeftbadge Left positioned heading label
Right inline badge
Rightbadge BugRight inline heading badge
Right floating badge
Rightfloating badge FixedRight floating heading badge
Left heading pill badge
48Leftpill badge Left positioned heading badge
Right inline pill badge
Rightpill badge 93Right inline heading pill badge
Right floating pill badge
Rightfloating pill badge 37Right floating heading pill badge
List options
Basic list examples with optional classesDefault unordered list
Default unordered list using .listclass
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Unstyled list
Unstyled list using .list-unstyledclass
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Square list type
Square list style using .list-squareclass
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Default ordered list
Default ordered list using .listclass
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Circle list type
Circle list style using .list-circleclass
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
List with icons
List with icons using .list-unstyledclass
- Lorem ipsum dolor sit amet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
List vertical sizing
List item vertical sizing optionsDefault list size
Default list doesn't have item spacing
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Custom list spacing
Add some spacing using .listclass
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Extended list
Extended list using .list-extendedclass
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Inline lists
Inline list style optionsDefault inline list
Inline list using .list-inlineclass
- 1. First item
- 2. Second item
- 3. Third item
Condensed inline list
Using .list-inline-condensedclass
- 1. First item
- 2. Second item
- 3. Third item
Separated inline list
Using .list-inline-separateclass
- First item
- Second item
- Third item
Description lists
Vertical and horizontal description listsVertical description list
Vertical list of terms with their associated descriptions.
- 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.
Horizontal description list
Horizontal list of terms with their associated descriptions.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- 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
Blockquote styling
Borders, icons and imagesLeft border
Display optional left border
Paid a cobra along or the sloth dear much eagle gosh from disagreeably lethargic before.
Left aligned image
Blockquote with optional left image
Dear far dove lynx inaudibly between after under after on some far warthog.
Left aligned icon
Add optional left icon using flex utilities
Paid a cobra along or the sloth dear much eagle gosh from disagreeably lethargic before.
Well hey as seagull more and staunchly uniquely much less alas delicate much checked.
Right border
Display optional right border
Or a more far thought close mammoth that so one bee more fidgeted checked and written.
Right aligned image
Blockquote with optional right image
Well hey as seagull more and staunchly uniquely much less alas delicate much checked.
Right aligned image
Add optional right icon using flex utilities
Or a more far thought close mammoth that so one bee more fidgeted checked and written.
Well hey as seagull more and staunchly uniquely much less alas delicate much checked.