MDL Kitchen Sink

An index of all of the MDL components.


Badges on icon

Number
Icon

Badges on text

Number
Inbox
Icon
Mood

Coloured FAB

Default
With ripple

Plain FAB

Default
With ripples
Disabled

Raised button

Regular
With ripples
Disabled

Coloured raised buttons

Coloured
Accent coloured
With Ripples

Flat button

Regular
With ripples
Disabled

Coloured flat buttons

Primary Colour
Accent Colour

Icon buttons

Regular
Coloured

Mini FAB

Regular
Coloured

Cards

Wide card with share menu button

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...

Square card

Update

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
Image card
Image.jpg

Event card

Featured event:
May 24, 2016
7-11pm


Chips

Basic
Basic Chip
Deletable
Deletable Chip
Button
Contact
A Contact Chip
Deletable Contact
Deletable Contact Chip

Dialog

MDL Dialog

This is an example of the Material Design Lite dialog component.


Grid

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
6
4
2
6 (8 tablet)
4 (6 tablet)
2 (4 phone)

Tabs

  • Eddard
  • Catelyn
  • Robb
  • Sansa
  • Brandon
  • Arya
  • Rickon
  • Tywin
  • Cersei
  • Jamie
  • Tyrion
  • Viserys
  • Daenerys

Footers

Mini
Mega

Lists

Regular
With icons
Avatars and actions
Bryan Cranston
Aaron Paul
Bob Odenkirk
Avatars and controls
Two line
Three line

Progress bar

Default
Intermediate
Buffering

Spinner

Default
Single colour

Sliders

Default
Starting value

Snackbar

Regular
Toast

Checkboxes

Checked
Unchecked

Radio buttons
Selected
Unselected

Icon toggles

Toggled
Untoggled

Switches

Switched
Unswitched

Tables

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35

Text fields

Simple
Numeric
Input is not a number!
Simple with floating label
Numeric with floating label
Input is not a number!
Multiple line
Expandable

Tooltips

Simple
Follow
Large
Print
Rich
Upload file.zip
Multiple lines
Share your content
via social media