Card title
Hover: the elevation goes from 2 to 6 dp along the standard curve.
Vellum
Material paper, re-crafted
No dependencies
Framework-agnostic
THEME
button
checkbox
Enabled
Disabled
dialog
fab
icon-button
input
Text input
Text area
Validation
Character counter
progress
Progress bar
Indeterminate
Secondary
radio-button
Enabled
Disabled
radio-group
Enabled
Disabled
slider
spinner
tabs
No ink effect and no sliding bar
The bottom bar appears to indicate the selected tab, but without sliding effect
The bar slides to the selected tab
Inky tabs with a sliding bar, in a toolbar
Navigation links (.v-tabs--nav): selected on click, before the page changes; the last one leaves the tabs
toast
toggle-button
Enabled
Disabled
toolbar
Standard
Tall
Vellum extras
Card
DefaultPrimarySuccessWarningErrorsmalloutlined
Info notice, derived from --v-info.
Warning notice.
Elevation (0 → 6: 0, 2, 4, 6, 8, 16, 24 dp)
0
1
2
3
4
5
6
Data table
| Element | Symbol | Number |
|---|---|---|
| Oxygen | O | 8 |
| Carbon | C | 6 |
| Hydrogen | H | 1 |
Typography
Display 34
Headline 24
Title 20
Subhead 16
Body 2 · 14 medium
Body 1 · 14 regular
Caption 12
theme contract
A theme only defines these base colors; shadows, states, focus, disabled colors and ripples are derived from them. Values of the active theme (edit them in the theme builder):