MDL Kitchen Sink

An index of all of the MDL components


Badges on icon

Number
account_box
Icon
account_box

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 cancel

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
  • Bryan Cranston
  • Aaron Paul
  • Bob Odenkirk
With icons
  • person Bryan Cranston
  • person Aaron Paul
  • person Bob Odenkirk
Avatars and actions
person Bryan Cranston star
person Aaron Paul star
person Bob Odenkirk star
Avatars and controls
  • person Bryan Cranston
  • person Aaron Paul
  • person Bob Odenkirk
Two line
  • person Bryan Cranston 62 Episodes Actor star
  • person Aaron Paul 62 Episodes star
  • person Bob Odenkirk 62 Episodes star
Three line
  • person Bryan Cranston Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle. star
  • person Aaron Paul Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie. star
  • person Bob Odenkirk Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul". star

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
add
Follow
Large
print
Print
Rich
cloud_upload
Upload file.zip
Multiple lines
share
Share your content
via social media