Style

Page provides styleguide for this site. This page is for development purpose only.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, 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.

Heading 2

Lorem ipsum dolor sit amet, 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.

Heading 3

Lorem ipsum dolor sit amet, 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.

Heading 4

Lorem ipsum dolor sit amet, 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.

Heading 5

Lorem ipsum dolor sit amet, 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.

Heading 6

Lorem ipsum dolor sit amet, 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.

---

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

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This is a blockquote. 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 standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Figure-Caption

The figcaption element example

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.

---

Text Elements

The a element and external a element examples
The abbr element and an abbr element with title examples
The ACRONYM element example
The b element example
The cite element example
The code element example
The data element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The time element example
The u element example
The var element example

---

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

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
      
      1. List Item 3.2.1
      2. List Item 3.2.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 Term 2

Definition Description 2

---

Tables

This is a table caption

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
A row with a cell spanning all 3 columns
Table Footer 1	Table Footer 2	Table Footer 3

---

Media

The Audio Element:

The Video Element:

Embedded content:

YouTube video (iframe):

---

Form Elements

The Fieldset:

Legend

The Form:

Text Field:




Disabled Text Field:




Readonly Text Field:




Text Area:




Disabled Text Area:

I'm disabled


Readonly Text Area:

I'm readonly


Select Element:

Option 1 Option 2 Option 1 Option 2 Disabled Option


Disabled Select Element:

Unselectable Option This option should not even be seen


Radio Buttons:

Radio 1

Radio 2

Radio 3

Radio Disabled



Checkboxes:

Checkbox 1

Checkbox 2

Checkbox 3

Checkbox Disabled



Password:




File Input:

HTML5-specific Form Elements

Email:




URL:




Telephone:




Number:




Search:




Date:




Time:




Color:




Datalist:





Range:




Output:

42

Progress:




Meter:

350 degrees