Styleguide

This is a page containing the most common HTML components to ensure suitable CSS styling is applied. This paragraph has a class of lead applied for visual heirarchy. This is an example of a link.

HTML elements in context

This standard paragraph features HTML elements in context. This is an example of a link and these are some of the most common inline styles such as strong and emphasis. This is strong and emphasis and emphasis and strong to check fonts. It also shows examples of sub text and sup text. Here we can see some inline code. This is the ABBR element. This is the b element. This is the cite element. This is the code element. This is the del element. This is the dfn element. This is the em element. This is the i element. This is the ins element. This is the kbd element. This is the mark element. This is the samp element. This is the small element. This is the var element.

This is a H1 heading

Example image (Alt text)
This is an image caption

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

This piece of text has been wrapped in a small tag.

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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

This is a H2 heading​

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.

This is a H3 heading​

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.

This is a H4 heading​

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.

This is a H5 heading​

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.

This is a H6 heading​

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.

Lists

Ordered list

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. Sub List Item 1
    2. Sub List Item 2
    3. Sub List Item 3
  4. List Item 4
  5. List Item 5
  6. List Item 6

Unordered list

  • List Item 1
  • List Item 2
  • List Item 3
    • Sub List Item 1
    • Sub List Item 2
    • Sub List Item 3
  • List Item 4
  • List Item 5
  • List Item 6

Blockquote

Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor. Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

John Doe

Forms

Buttons

Alerts

Tabs

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Accordions

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Heading #1
Heading #2
Heading #3
111
222
333
aaa
bbb
ccc
yes
no
maybe