Typography

Headings & Body text

H1. Heading

Lead text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta voluptatibus quos ea dolore rem, molestias laudantium et explicabo assumenda fugiat deserunt in, facilis laborum excepturi aliquid nobis ipsam deleniti aut? Aliquid sit hic id velit qui fuga nemo suscipit obcaecati.


H2. Heading

Large text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta voluptatibus quos ea dolore rem, molestias laudantium et explicabo assumenda fugiat deserunt in, facilis laborum excepturi aliquid nobis ipsam deleniti aut? Aliquid sit hic id velit qui fuga nemo suscipit obcaecati.


H3. Heading

Regular text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta voluptatibus quos ea dolore rem, molestias laudantium et explicabo assumenda fugiat deserunt in, facilis laborum excepturi aliquid nobis ipsam deleniti aut? Aliquid sit hic id velit qui fuga nemo suscipit obcaecati. Officia nisi quaerat minus nulla saepe aperiam sint possimus magni veniam provident.


H4. Heading

Small text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta voluptatibus quos ea dolore rem, molestias laudantium et explicabo assumenda fugiat deserunt in, facilis laborum excepturi aliquid nobis ipsam deleniti aut? Aliquid sit hic id velit qui fuga nemo suscipit obcaecati. Officia nisi quaerat minus nulla saepe aperiam sint possimus magni veniam provident.


H5. Heading

Extra small text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta voluptatibus quos ea dolore rem, molestias laudantium et explicabo assumenda fugiat deserunt in, facilis laborum excepturi aliquid nobis ipsam deleniti aut? Aliquid sit hic id velit qui fuga nemo suscipit obcaecati. Officia nisi quaerat minus nulla saepe aperiam sint possimus magni veniam provident.


H6. Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta voluptatibus quos ea dolore rem, molestias laudantium et explicabo assumenda fugiat deserunt in, facilis laborum excepturi aliquid nobis ipsam deleniti aut? Aliquid sit hic id velit qui fuga nemo suscipit obcaecati. Officia nisi quaerat minus nulla saepe aperiam sint possimus magni veniam provident.


Display 1


Display 2


Display 3


Display 4


Contextual colors

  • Primary. Lorem ipsum dolor sit amet consectetur.
  • Info. Lorem ipsum dolor sit amet consectetur.
  • Success. Lorem ipsum dolor sit amet consectetur.
  • Warning. Lorem ipsum dolor sit amet consectetur.
  • Danger. Lorem ipsum dolor sit amet consectetur.
  • Muted. Lorem ipsum dolor sit amet consectetur.
Contextual backgrounds

Ipsum saepe nam labore, quidem explicabo dolor dolorum hic aperiam aspernatur. Tenetur maiores impedit neque tempore suscipit velit ea corrupti aperiam dicta? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis suscipit natus, incidunt unde accusantium, obcaecati consequatur, possimus saepe voluptate quia nobis tempore dolores nesciunt quaerat excepturi quo veniam est corporis.

Unordered list

  • Architecto nobis deleniti iure eaque explicabo animi.
  • Lorem ipsum dolor sit amet consectetur quia alias.
  • Nemo mollitia labore, ipsam nesciunt excepturi sequi.
  • Excepturi perferendis voluptatum mollitia nesciunt.
Ordered list

  1. Architecto nobis deleniti iure eaque explicabo animi.
  2. Lorem ipsum dolor sit amet consectetur quia alias.
  3. Nemo mollitia labore, ipsam nesciunt excepturi sequi.
  4. Excepturi perferendis voluptatum mollitia nesciunt.
Icon list

  • Architecto nobis deleniti iure eaque explicabo animi.
  • Lorem ipsum dolor sit amet consectetur quia alias.
  • Nemo mollitia labore, ipsam nesciunt excepturi sequi.
  • Excepturi perferendis voluptatum mollitia nesciunt.
Unstyled list

  1. Architecto nobis deleniti iure eaque explicabo animi.
  2. Lorem ipsum dolor sit amet consectetur quia alias.
  3. Nemo mollitia labore, ipsam nesciunt excepturi sequi.
  4. Excepturi perferendis voluptatum mollitia nesciunt.
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 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.

Description list

Description lists
A description list is perfect for defining terms.
Malesuada porta
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit porto fegut.
Lorem ipsum dolor sit amet
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Blockquotes

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis eius modi tempora.

Someone famous

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis eius modi tempora.

Quotation authorSomeone famous
Inline Code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

User Input

To switch directories, type cd followed by the name of the directory.

To edit settings, press ctrl + ,

Code Blocks

 <p>Sample text here...</p>
 <p>And another line of sample text here...</p>