Materials
Presets for radii, fills, strokes, and shadows.
Surface
On the page.
Example | Class name | Usage |
|---|---|---|
Material Base Transparent max W [240px] h [100px] | material-base | Everyday use. Radius 6px. |
Material Small Transparent max W [240px] h [100px] | material-small | Slightly raised. Radius 6px. |
Material Medium Transparent max W [240px] h [100px] | material-medium | Further raised. Radius 12px. |
Material Large Transparent max W [240px] h [100px] | material-large | Further raised. Radius 12px. |
Floating
Above the page.
Example | Class name | Usage |
|---|---|---|
Material Tooltip Transparent max W [240px] h [100px] | material-tooltip | Lightest shadow. Corner 6px. Tooltips will be the only floating element with a triangular stem. |
| material-menu | Lift from page. Radius 12px. | |
Material Modal Transparent max W [240px] h [100px] | material-modal | Further lift. Radius 12px. |
Material Fullscreen Transparent max W [240px] h [100px] | material-fullscreen | Biggest lift. Radius 16px. |
Was this helpful?