Typography
Get more typography examplesHeadings
All HTML headings, <h1>
through <h6>
, are available.
This is a heading h1
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero.
This is a heading h2
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
This is a heading h3
Etiam rhoncus. Maecenas tempus, tellus condimentum rhoncus, sem quam libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, vel.
This is a heading h4
Etiam rhoncus. Maecenas tempus, tellus condimentum rhoncus, sem quam libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, vel.
This is a heading h5
Sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.
This is a heading h6
Sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.
Coloured text
Contextual text classes.
This line of text contains the text-primary class.
This line of text contains the text-secondary class.
This line of text contains the text-success class.
This line of text contains the text-danger class.
This line of text contains the text-warning class.
This line of text contains the text-info class.
Inline text
Styling for common inline HTML5 elements.
You can use the mark-tag to highlight text.
This line of text can be treated as deleted text.
This line of text can be treated as an addition to the document.
Bold text using the strong-tag
Italicized text using the em-tag
Blockquotes
For quoting blocks of content from another source within your document.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Add .blockquote-reverse
for a blockquote with right-aligned content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
List unordered
The unordered list items will are marked with bullets.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Eget porttitor lorem
List ordered
The ordered list items will are marked with numbers.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Eget porttitor lorem