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-baseEveryday use. Radius 6px.
Material Small Transparent max W [240px] h [100px]
material-smallSlightly raised. Radius 6px.
Material Medium Transparent max W [240px] h [100px]
material-mediumFurther raised. Radius 12px.
Material Large Transparent max W [240px] h [100px]
material-largeFurther raised. Radius 12px.

Floating

Above the page.

Example
Class name
Usage
Material Tooltip Transparent max W [240px] h [100px]
material-tooltipLightest shadow. Corner 6px. Tooltips will be the only floating element with a triangular stem.
Material Menu Transparent max W [240px] h [100px]
material-menuLift from page. Radius 12px.
Material Modal Transparent max W [240px] h [100px]
material-modalFurther lift. Radius 12px.
Material Fullscreen Transparent max W [240px] h [100px]
material-fullscreenBiggest lift. Radius 16px.