Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 0 (flush with the surface) to 24dp (most elevated).

Table of Contents

• Resources
• Basic Usage
• Elevation

Resources

• Demo: Elevations
• Material Design Guidelines: Shadows & elevation
• MDC Web: Elevation
• Sass Mixins (MDC Web)

Basic Usage

import Material.Elevation as Elevation


main =
    Html.div [ Elevation.z8 ] [ text "Elevation" ]

Elevation