Buttons

Inputs

Text input

Date input

Numeric input

Password input

Checkbox input

Checkbox input (checked)

Radio input 1

Radio input 2 (checked)

Radio input 1 With a breif description Radio input 2 (checked) With a brief description

Switch input Switch input with custom status text (checked) True False Switch input without status text

Standalone switch (no label, auto status text):

Standalone switch (no label, no status text):

Badges

Default small badge Highlight small badge Lowlight small badge Accent small badge

Default large badge Highlight large badge Lowlight large badge Accent large badge

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs

Default paragraph

Paragraph 1

Paragraph 2

Paragraph 3

Blockquotes

This is an example blockquote

This is an example lightweight blockquote

Personas

Jeff Jefferson

My name's Jeff

Jeff Jefferson

My name's Jeff

Jeff Jefferson

My name's Jeff

Jeff Jefferson

Headers

Typographic header

This is a typographic header.

Small typographic header

This is a small typographic header.

Lightweight typographic header

This is a lightweight typographic header.

Small lightweight typographic header

This is a small lightweight typographic header.

Intro header (basic nav)

This is similar to a typographic header, except it spans the width of the page and allows for navigation elements to be placed on it.

Intro header (2 column nav)

This is similar to a typographic header, except it spans the width of the page and allows for navigation elements to be placed on it.

Intro header (3 column nav)

This is similar to a typographic header, except it spans the width of the page and allows for navigation elements to be placed on it.

Small headers

Nav intro header:

Nav intro header

This text is not visible to the user until the small class is removed from this intro header.

Basic navbars

Navbar:

Native headers (EXPERIMENTAL)

With native headers, the layout, design and positioning will dynamically changed depending on the OS. For example, on Windows 10, a fluent design header will be shown. On iOS, a tab bar at the bottom will be shown. On Android, a material design header will be shown with hamburger menu.

Show native header 1