Styleguide

Headings & Sections

Heading 1 with a link & <code>

Heading 2 with a link & <code>

Heading 3 with a link & <code>

Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

I am brave, strong, loyal, and give great hugs. And I am going to be the best friend that I CAN BE!
— Scorpia, to herself in episode Princess Scorpia

Vitae tortor condimentum lacinia quis vel eros. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Morbi leo urna molestie at elementum. Lacus sed turpis tincidunt id aliquet risus feugiat in.

Text Elements

The a element example

The strong element example

The b element example

The em element example

The i element example

The cite element example

The code element example

The kbd element example

Monospace / Preformatted

Code block wrapped in “pre” and “code” tags:

// Loop through Divs using Javascript.
var divs = document.querySelectorAll("div")

for (i = 0; i < divs.length; ++i) {
	divs[i].style.color = "green"
}

Monospace Text wrapped in “pre” tags:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

List Types

Ordered List

1. List Item 1
2. List Item 2
3. List Item 3
   1. List Item 3.1
   2. List Item 3.2
   3. List Item 3.3
4. List Item 4

Unordered List

• List Item 1
• List Item 2
• List Item 3
  • List Item 3.1
  • List Item 3.2
    • List Item 3.2.1
    • List Item 3.2 2
  • List Item 3.3
• List Item 4

Definition List

Definition Term 1

Definition Description 1

Definition Description 2

Definition Term 2

Definition Description 1

Tables