HTML reference guide (version 1.6.0)

(Optional header element)

(Optional header element)

Breadcrumbs

Tabs

Example tab content.

Buttons





(a button that looks like a link)

Button link (a link that looks like a button)

Paginator

Modal dialogs

Show dialog

Tables

Optional Table Caption
Heading Heading Heading
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum Lorem ipsum dolor sit amet Lorem ipsum

Icons

Standard icons:

Styled icons:

Images

basic shadow rounded border
caption
Image Caption
circle

Basic inputs







Switchbutton

File upload input

Date picker input

Paired date picker inputs

Datetime picker input

Enhanced select inputs



Vertical form

Form Title

Vertical form (with background)

Form Title

Fieldset

Describe what this form is about?

Describe what this field is about?

Describe an error

Radio input (horizontal)

Radio input (vertical)




Fieldset

Checkbox input

Optional ReCAPTCHA error

Typography

Example Link | False Link (useful for JavaScript apps)
Standard text | Strong text | Emphasised text | Deleted text
Information text | Success text | Warning text | Error text | De-emphasised text
Small text | Standard text | Large text | Massive text

Example paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Headings

Example H1 heading

Example H2 heading

Example H3 heading

Example H4 heading

Example H5 heading
Example H6 heading

Example H3 heading with no underline

Messages

Success

Warning

Error

Information

Example block quote.

Success with icon

Code blocks

//example code block
#include 
int main()
{
  std::cout << "Hello, world!\n";
}

Example of inline code: rm -rf /

Lists

  • List with heading
  • Lorem ipsum
  • Lorem ipsum
  1. Lorem ipsum
  2. Lorem ipsum

Alignment

Left
Center
Right