Typography

Headlines

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Display headings

Display 1

Display 2

Display 3

Display 4

Text Modifiers

Text with primary style.

Text with secondary style.

Text with success style.

Text with warning style.

Text with danger style.

Text with info style.

Text with light style.

Text with dark style.


White text with 75% opacity.

White text with 50% opacity.

White text with 25% opacity.


Black text with 75% opacity.

Black text with 50% opacity.

Black text with 25% opacity.

Text

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 center aligment.

Text right aligmet.

Text small size.

Text normal size.

Text large size.

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Block Quote with Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Block Quote with Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

List

  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit.
  • Iste delectus quasi dicta.
  • Architecto eius aliquid magni totam velit.
  • Lorem ipsum dolor sit amet.
    • Nulla qui iste, et, officiis facilis recusandae.
    • Perferendis mollitia incidunt sequi iusto
  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit.
  • Iste delectus quasi dicta.

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipisicing elit.
  3. Iste delectus quasi dicta.
  4. Architecto eius aliquid magni totam velit.
  5. Lorem ipsum dolor sit amet.
    1. Nulla qui iste, et, officiis facilis recusandae.
    2. Perferendis mollitia incidunt sequi iusto
  6. Lorem ipsum dolor sit amet
  7. Consectetur adipisicing elit.
  8. Iste delectus quasi dicta.

Unstyled List

  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit.
  • Iste delectus quasi dicta.
  • Architecto eius aliquid magni totam velit.
  • Lorem ipsum dolor sit amet.
    • Nulla qui iste, et, officiis facilis recusandae.
    • Perferendis mollitia incidunt sequi iusto
  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit.
  • Iste delectus quasi dicta.

Description

Full name:
John Doe
Location:
San Francisco, California, USA Edit
Web site:
https://example.com
About:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum totam architecto vel, minus eaque hic ipsum eligendi commodi labore quasi sit reprehenderit quas consectetur, ipsam tenetur expedita corporis odio repellat.

Description Horizontal

Text partition Edit
Full name:
John Doe
Location:
San Francisco, California, USA
Text partition
Web site:
https://example.com Edit
About:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum totam architecto vel, minus eaque hic ipsum eligendi commodi labore quasi sit reprehenderit quas consectetur, ipsam tenetur expedita corporis odio repellat.

Badges

Default:

Default Primary Secondary Success Warning Danger Info Dark Link

Outline:

Primary Secondary Success Warning Danger Info Dark

Pill:

1 20 30 40 50 60 70 80