Buttons









Inputs






With a breif description With a brief description


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

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:



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