Back

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquam sagittis magna, non volutpat quam pharetra vel. Sed sapien elit, dignissim a varius sit amet, congue eget augue. Fusce dictum interdum erat vel rhoncus. Sed euismod, orci vel commodo aliquet, eros neque pulvinar justo, non varius lacus ex ut metus. Aliquam ultrices nulla ac nunc pretium, vel lacinia tortor pulvinar. Etiam pulvinar nibh molestie leo hendrerit pretium.

Vivamus vulputate turpis sed eros dictum dictum. Donec suscipit vehicula ligula, at ultricies est egestas vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent imperdiet iaculis commodo. Quisque nec facilisis lectus, eu condimentum augue. Fusce vel lorem vehicula, vestibulum magna eu, malesuada urna. Pellentesque suscipit ligula quis ipsum tincidunt tempor.

Headings

Proin convallis a magna aliquet facilisis

In finibus laoreet luctus

Proin tempus turpis ac lectus maximus ac tempor ante accumsan

Vestibulum dictum tincidunt commodo

Vestibulum vel enim ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae ultricies magna. Praesent commodo imperdiet nunc, ut dapibus erat eleifend sit amet. Pellentesque in odio dignissim, fermentum nunc nec, tristique nisl. Nullam eu molestie magna, sit amet tincidunt nunc. Sed turpis purus, efficitur sit amet orci a, aliquam lacinia quam. Sed vestibulum accumsan tortor.

Inline text elements

You can use the <mark> tag to highlight text. The <del> tag is used for text that is meant to be treated as deleted. Use the <sgt; tag if the text is no longer accurate. The <insgt; tag is for text that is meant to be treated as an addition to the document. This text will render as underlined. This text is meant to be treated as fine print. This text is rendered as bold. This text is rendered as italicized. attr is an abbreviation for "attribute". HTML no longer supports the <acronym> tag.

Code blocks

const myModal = document.querySelector('#myModal')

myModal.addEventListener('show.bs.modal', event => {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

Blockquotes

Suspendisse tristique massa a dui convallis, vel posuere metus facilisis. Proin viverra leo auctor, pulvinar dui non, auctor magna. Sed vel ipsum in dolor rhoncus mollis in id ligula.

Lists

Ordered lists

1. Quisque non risus ac mauris dictum rutrum.
2. Curabitur faucibus felis quis convallis accumsan.
3. Maecenas tincidunt.
4. Dui eget venenatis elementum.
5. Metus lectus suscipit augue:
   • In vulputate diam dolor eget urna.
   • Aenean nec nibh blandit.
   • Ullamcorper tortor ac.
6. Fusce scelerisque urna id dui eleifend vestibulum.

Unordered lists

• Quisque non risus ac mauris dictum rutrum.
• Curabitur faucibus felis quis convallis accumsan.
• Maecenas tincidunt.
• Dui eget venenatis elementum.
• Metus lectus suscipit augue:
  • In vulputate diam dolor eget urna.
  • Aenean nec nibh blandit.
  • Ullamcorper tortor ac.
• Fusce scelerisque urna id dui eleifend vestibulum.

Description lists

Description lists

A description list is perfect for defining terms.

Term

Description of the term.

And some more placeholder description text.

Another term

This description is short, so no extra paragraphs or anything.

Truncated term is truncated

This can be useful when space is tight. Adds an ellipsis at the end.

Nesting

Nested description list

I heard you like description lists. Let me put a description list inside your description list.

Images

Figures

Tables