Style Guide

This page contain examples of various HTML and CSS uses on this site.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Formatting

Quisque in rutrum sem. Aenean dignissim erat a sem vulputate luctus. Sed eros nisl, gravida vitae vestibulum porta, tempus ac magna. ¹ Nulla facilisi. Phasellus scelerisque vel sem id posuere. Donec eu sagittis turpis. Integer massa sapien, pellentesque vitae arcu a, condimentum porta magna. Morbi malesuada tellus nec ex laoreet aliquet. Donec finibus ornare sem, in tempus mi gravida mattis. Sed gravida id diam ac hendrerit.

The quick brown fox jumped over the lazy dawgs.

The quick brown fox jumped over the lazy dawgs.

The quick brown fox jumped over the lazy dawgs.

The quick brown fox jumped over the lazy dawgs.

https://external-website.com/path/to/resource

fake@example.com

Lists

Unordered List

• item 1
• item 2
  • item 2 sub 1
  • item 2 sub 2
  • item 2 sub 3
    • item 2 sub 3 subsub 1
    • item 2 sub 3 subsub 2
• item 3

Ordered List

1. item 1
2. item 2
   1. item 2 sub 1
   2. item 2 sub 2
   3. item 2 sub 3
      1. item 2 sub 3 subsub 1
      2. item 2 sub 3 subsub 2
3. item 3

Definition List

The Quick Brown Fox

Donec ac felis sit amet turpis convallis efficitur ut ac nisi.

Morbi condimentum turpis id porta lacinia.

The Lazy Dawgs

bar

bar

Horizontal Rule

Tables

Code

The quick brown fox jumped over the lazy dawgs.

async function foo(bar) {
    const { hello, world } = bar;
    const baz = [ hello, world ];
    return baz;
}

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus, magna quis tincidunt convallis, orci ligula rutrum dui, vel vehicula nunc ipsum nec ligula. ² In bibendum rutrum lacus vel aliquam. Etiam libero orci, fermentum at lacinia at, tincidunt at nunc. Mauris mattis vitae

Quisque dapibus urna at porttitor laoreet. In consequat mauris sed magna vestibulum, quis imperdiet magna pharetra. In pulvinar, arcu pretium ultricies scelerisque, quam erat euismod risus, sed vestibulum sem elit vel quam. Aliquam erat volutpat. Nullam id lorem vel tellus gravida sollicitudin. Curabitur malesuada bibendum elit sed suscipit.

Phasellus a sem risus. Mauris mi dolor, euismod nec imperdiet ut, interdum at risus. Sed fermentum ornare enim at placerat. Nulla ut dolor ut elit molestie molestie ac a erat. Etiam ac dui auctor, dignissim ante id, sodales mauris. Donec in purus a quam semper elementum. Fusce maximus tortor

Heading In Block Quote

• List Item
• Inside Block

In pulvinar, arcu pretium ultricies scelerisque, quam erat euismod risus, sed vestibulum sem elit vel quam. Aliquam erat volutpat. Nullam id lorem vel tellus gravida sollicitudin. Curabitur malesuada bibendum elit sed suscipit.

Callouts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna quis nibh euismod efficitur. Curabitur mauris est, fermentum eu libero at, aliquam commodo est. Vivamus ac est vitae felis rutrum convallis vitae et leo. Cras eget gravida orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac.

Footnotes