MDL Kitchen Sink
An index of all of the MDL components.
Badges on icon
Number
Icon
Badges on text
Number
InboxIcon
MoodColoured 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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
Image card
Image.jpg
Event card
Chips
Basic
Basic ChipDeletable
Deletable ChipButton
Contact
A Contact ChipDeletable Contact
Deletable Contact ChipDialog
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
Avatars and actions
Avatars and controls
- Bryan Cranston
- Aaron Paul
- Bob Odenkirk
Two line
Three line
- Bryan Cranston Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle.
- Aaron Paul Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie.
- 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".
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
via social media