Here is list of all the components that compose the Framework

For more concrete examples, visit the Examples page

On this page, you'll find :

Typography

Roboto

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Headers

Material Design

Material Design

Material Design

Material Design

Material Design
Material Design

Noto

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Headers

Material Design

Material Design

Material Design

Material Design

Material Design
Material Design

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor cum, quia eaque quos? Aut nemo deleniti debitis neque praesentium eius aliquid nihil possimus natus. Voluptate ea possimus nobis consectetur quisquam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor cum, quia eaque quos? Aut nemo deleniti debitis neque praesentium eius aliquid nihil possimus natus. Voluptate ea possimus nobis consectetur quisquam.

Grid

1 .bit-1
1/2 .bit-2
1/2 .bit-2
1/3 .bit-3
1/3 .bit-3
1/3 .bit-3
1/4 .bit-4
1/4 .bit-4
1/4 .bit-4
1/4 .bit-4
1/5 .bit-5
1/5 .bit-5
1/5 .bit-5
1/5 .bit-5
1/5 .bit-5
1/6 .bit-6
1/6 .bit-6
1/6 .bit-6
1/6 .bit-6
1/6 .bit-6
1/6 .bit-6
1/7 .bit-7
1/7 .bit-7
1/7 .bit-7
1/7 .bit-7
1/7 .bit-7
1/7 .bit-7
1/7 .bit-7
1/8 .bit-88
1/8 .bit-8
1/8 .bit-8
1/8 .bit-8
1/8 .bit-8
1/8 .bit-8
1/8 .bit-8
1/8 .bit-8
1/9 .bit-9
1/9 .bit-9
1/9 .bit-9
1/9 .bit-9
1/9 .bit-9
1/9 .bit-9
1/9 .bit-9
1/9 .bit-9
1/9 .bit-9
1/10 .bit-10
1/10 .bit-10
1/10 .bit-10
1/10 .bit-10
1/10 .bit-10
1/10 .bit-10
1/10 .bit-10
1/10 .bit-10
1/10 .bit-10
1/10 .bit-10
1/11 .bit-11
1/11 .bit-11
1/11 .bit-11
1/11 .bit-11
1/11 .bit-11
1/11 .bit-11
1/11 .bit-11
1/11 .bit-11
1/11 .bit-11
1/11 .bit-11
1/11 .bit-11
1/12 .bit-12
1/12 .bit-12
1/12 .bit-12
1/12 .bit-12
1/12 .bit-12
1/12 .bit-12
1/12 .bit-12
1/12 .bit-12
1/12 .bit-12
1/12 .bit-12
1/12 .bit-12
1/12 .bit-12

Lists

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item

Forms

Inputs

Checkbox

Radio

Range

Navbar

Without ripples, left aligned

With ripples, left aligned

Without ripples, right aligned

With ripples, right aligned

Without ripples, right aligned and subnavigation

With ripples, right aligned and subnavigation

Cards

A simple card

Some text..

A simple card

Some text..

Card with divider

Some text..

Card with divider

Some text..

Progress-bars

Determinate

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus deleniti sunt, minima atque debitis nostrum natus mollitia veritatis reiciendis et ducimus amet eaque alias iste impedit, quisquam quae eum odit!

Fixed

70% 40% 70% 80%

Animated

70% 40% 60% 80%

Indeterminate

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus deleniti sunt, minima atque debitis nostrum natus mollitia veritatis reiciendis et ducimus amet eaque alias iste impedit, quisquam quae eum odit!

Animated

70% 40% 60% 80%

Spinners

Spinner

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus deleniti sunt, minima atque debitis nostrum natus mollitia veritatis reiciendis et ducimus amet eaque alias iste impedit, quisquam quae eum odit!

Determinate

Indeterminate