Material Design UI Kit
Home
Nav Drawer
Buttons
Cards
Menus
Colors
Tabs
Bottom Sheets
Tooltips
Lists
Icons
Settings
Example App
Theme
Nav Drawer
Buttons
Cards
Menus
Colors
Tabs
Bottom Sheets
Tooltips
Lists
Icons
Typography
About
Nav Drawer
The navigation drawer slides in from the left and contains the navigation destinations for your app.
Buttons
Buttons communicate the action that will occur when the user touches them.
Cards
A card is a sheet of material that serves as an entry point to more detailed information.
Menus
Menus display a list of choices on a transient sheet of material.
Colors
Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.
Tabs
Tabs make it easy to explore and switch between different views.
Bottom Sheets
Bottom sheets slide up from the bottom of the screen to reveal more content.
Tooltips
Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.
Lists
Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text.
Icons
Material icons use geometric shapes to visually represent core ideas, capabilities, or topics.
Typography
Roboto and Noto are the standard typefaces on Android and Chrome.
Card images from
google material design guidelines