Features – Typography

Headings, body copy styles, quotes, lists, etc.

Headings

This is an example of a subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus. Maecenas enim.

h1. This is heading 1

h2. This is heading 2

h3. This is heading 3

h4. This is heading 4

h5. This is heading 5
h6. This is heading 6

h1. This is heading 1. With a small segment

h2. This is heading 2. With a small segment

h3. This is heading 3. With a small segment

h4. This is heading 4. With a small segment

h5. This is heading 5. With a small segment
h6. This is heading 6. With a small segment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus. Maecenas enim.

To learn more check the documentation.

Body text

This paragraph has size 'xxlarge'. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet.

This paragraph has size 'xlarge'. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus.

This paragraph has size 'large'. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus. Maecenas enim nisi, elementum id iaculis.

This is a normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus. Maecenas enim nisi, elementum id iaculis nec, fringilla id eros. Vestibulum ante ipsum primis in faucibus orci luctus.

This paragraph has size 'small'. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus. Maecenas enim nisi, elementum id iaculis nec, fringilla id eros.

This paragraph has size 'tiny'. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus. Maecenas enim nisi, elementum id iaculis nec, fringilla id eros.

This paragraph has size 'micro'. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus. Maecenas enim nisi, elementum id iaculis nec, fringilla id eros.

To learn more check the documentation.

Blockquotes

Normal blockquote

Curabitur tincidunt magna et nulla molestie non consectetur felis commodo. Vivamus aliquam sapien id nisi sagittis accumsan. Aliquam sit amet mauris nibh, porttitor molestie sapien. Vivamus vitae neque tortor. Vivamus eu laoreet ante.

John Smith

Blocquote aligned to the right

Curabitur tincidunt magna et nulla molestie non consectetur felis commodo. Vivamus aliquam sapien id nisi sagittis accumsan. Aliquam sit amet mauris nibh, porttitor molestie sapien. Vivamus vitae neque tortor. Vivamus eu laoreet ante.

John Smith

Blocquote floated to the right

Curabitur tincidunt magna et nulla molestie non consectetur felis commodo. Vivamus aliquam sapien id nisi sagittis accumsan. Aliquam sit amet mauris nibh, porttitor molestie sapien. Vivamus vitae neque tortor. Vivamus eu laoreet ante. Cras ut sapien diam,

Curabitur tincidunt magna et nulla molestie non consectetur felis commodo. Vivamus aliquam sapien id nisi sagittis accumsan.

John Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus. Maecenas enim nisi, elementum id iaculis nec, fringilla id eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Etiam aliquam gravida ornare. Pellentesque sed viverra odio. Duis sodales lorem lectus. Vivamus malesuada dignissim quam quis semper.

Alternative blockquote style

Curabitur tincidunt magna et nulla molestie non consectetur felis commodo. Vivamus

John Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus. Maecenas enim nisi, elementum id iaculis nec, fringilla id eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Etiam aliquam gravida ornare. Pellentesque sed viverra odio. Duis sodales lorem lectus. Vivamus malesuada dignissim quam quis semper. Phasellus suscipit nisl pretium urna sodales accumsan. Proin nec arcu vel tortor ullamcorper fermentum. Nam ac nisi lacus.

Lists

Unordered list

  • Curabitur tincidunt magna
  • Suspendisse a urna
  • Duis accumsan congue
  • Praesent neque
  • Vestibulum ante ipsum
  • Nullam ullamcorper nunc

Ordered list

  1. Curabitur tincidunt magna
  2. Suspendisse a urna
  3. Duis accumsan congue
  4. Praesent neque
  5. Vestibulum ante ipsum
  6. Nullam ullamcorper nunc

Definition list

Curabitur tincidunt magna
Suspendisse a urna
Duis accumsan congue
Praesent neque
Vestibulum ante ipsum
Nullam ullamcorper nunc

Lists styled with icons *

  • Curabitur tincidunt magna
  • Suspendisse a urna
  • Duis accumsan congue
  • Praesent neque
  • Vestibulum ante ipsum
  • Nullam ullamcorper nunc
  • Curabitur tincidunt magna
  • Vestibulum ante ipsum
  • Nullam ullamcorper nunc
  • Suspendisse a urna
  • Duis accumsan congue
  • Praesent neque
  • Curabitur tincidunt magna
  • Suspendisse a urna
  • Vestibulum ante ipsum
  • Nullam ullamcorper nunc
  • Duis accumsan congue
  • Praesent neque

* You can use any of the 250 included icons.

To learn more check the documentation.

Labels & badges

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new.

Labels

Default   Success   Warning   Important   Info   Inverse  

Badges

Default   Success   Warning   Important   Info   Inverse  

To learn more check the documentation.

Style Switcher

Layout Wide Boxed
Background patterns * pattern 1 pattern 2 pattern 3 pattern 4 pattern 5 pattern 6

* Boxed layout only