Shadows

Coats Digital Design Language shadows are lighter and brighter than standard Material Design shadows, which we consider a bit rough.

Basic example

For light design and bright compositions use standard shadows. To apply a shadow to an element simply add one of the following classes to it.

  • .cd-shadow
  • .cd-shadow-1
  • .cd-shadow-2
  • .cd-shadow-3
  • .cd-shadow-4
  • .cd-shadow-5
.cd-shadow-0
.cd-shadow-1
.cd-shadow-2
.cd-shadow-3
.cd-shadow-4
.cd-shadow-5

Shadow option

For dark design and dark elements use strong shadows by adding -lg to the shadow class. For example: .cd-shadow-1-lg

.cd-shadow-lg-0
.cd-shadow-lg-1
.cd-shadow-lg-2
.cd-shadow-lg-3
.cd-shadow-lg-4
.cd-shadow-lg-5

                            
                              
                            
                          
Images with shadow

Theoretically, depending on the brightness of the image you should use standard or strong shadow. However, practical use shows that in most graphics strong shadows work better in most cases with images.