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

This is a H3 heading

This is a H4 heading

This is a H5 heading

This is a H6 heading

H1 as a link

H2 as a link

H3 as a link

H4 as a link

H5 as a link

H6 as a link

Lists

Ordered list

List Item 1
List Item 2
List Item 3
1. Sub List Item 1
2. Sub List Item 2
3. Sub List Item 3
List Item 4
List Item 5
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

Name

Website

Select

Textarea

Date

Radio buttons

Option one Option two Option three

Checkboxes

Option one Option two Option three

Upload your file

Acceptance

I confirm this is true

Buttons

Alerts

This is an info alert I am a description. Click the edit button to change this text.

This is a success alert I am a description. Click the edit button to change this text.

This is a warning alert I am a description. Click the edit button to change this text.

This is a danger alert I am a description. Click the edit button to change this text.

Tabs

Tab #1

Tab #2

Tab #1

Tab #2

Accordions

Accordion #1

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.

Accordion #2

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

Styleguide

Styleguide

HTML elements in context

This is a H1 heading