Vincent Morneau
Shadows
In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is. By default, everything has a depth of 1.
Depth 0
Depth 1
Depth 2
Depth 3
Depth 4
Depth 5
Selected Template Options
Component Name: Depth 0
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Alignment - TitleCenter
Text Color - TitleWhite
Background ColorRed
Background ModifierLighten 2
ShadowDepth 0
Component Name: Depth 1
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Alignment - TitleCenter
Text Color - TitleWhite
Background ColorDeep Orange
Background ModifierLighten 2
ShadowDepth 1
Component Name: Depth 2
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Alignment - TitleCenter
Text Color - TitleWhite
Background ColorPink
Background ModifierLighten 2
ShadowDepth 2
Component Name: Depth 3
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Alignment - TitleCenter
Text Color - TitleWhite
Background ColorLight Blue
Background ModifierLighten 2
ShadowDepth 3
Component Name: Depth 4
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Alignment - TitleCenter
Text Color - TitleWhite
Background ColorLight Green
Background ModifierLighten 2
ShadowDepth 4
Component Name: Depth 5
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Alignment - TitleCenter
Text Color - TitleWhite
Background ColorTeal
Background ModifierLighten 2
ShadowDepth 5