Typography

Examples for typography, including global settings, headings, body text, lists, and more.


Headings

h1. Html heading

h2. Html heading

h3. Html heading

h4. Html heading

h5. Html heading
h6. Html heading

Class headings

h1. Class heading

h2. Class heading

h3. Class heading

h4. Class heading

h5. Class heading

h6. Class heading

Customizing headings

Fancy display heading With faded secondary text

Display headings

Display 1

Display 2

Display 3

Display 4

Lead paragraphs

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Inline text 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.

Text utilities

Examples for typography, including global settings, headings, body text, lists, and more.


Text alignment

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

Breakpoints alignment

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

Text wrapping and overflow

Curabitur blandit tempus ardua ridiculus sed magna.

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.

Text transform

Lowercased text.

Uppercased text.

CapiTaliZed text.

Font weight and italics

Bold text.

Normal weight text.

Italic text.