aforemny / material-components-web-elm / Material.Elevation

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

import Material.Elevation as Elevation

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

Elevation

z0 : Html.Attribute msg

0dp elevation (no elevation)

z1 : Html.Attribute msg

1dp elevation

z2 : Html.Attribute msg

2dp elevation

z3 : Html.Attribute msg

3dp elevation

z4 : Html.Attribute msg

4dp elevation

z5 : Html.Attribute msg

5dp elevation

z6 : Html.Attribute msg

6dp elevation

z7 : Html.Attribute msg

7dp elevation

z8 : Html.Attribute msg

8dp elevation

z9 : Html.Attribute msg

9dp elevation

z10 : Html.Attribute msg

10dp elevation

z11 : Html.Attribute msg

11dp elevation

z12 : Html.Attribute msg

12dp elevation

z13 : Html.Attribute msg

13dp elevation

z14 : Html.Attribute msg

14dp elevation

z15 : Html.Attribute msg

15dp elevation

z16 : Html.Attribute msg

16dp elevation

z17 : Html.Attribute msg

17dp elevation

z18 : Html.Attribute msg

18dp elevation

z19 : Html.Attribute msg

19dp elevation

z20 : Html.Attribute msg

20dp elevation

z21 : Html.Attribute msg

21dp elevation

z22 : Html.Attribute msg

22dp elevation

z23 : Html.Attribute msg

23dp elevation

z24 : Html.Attribute msg

24dp elevation