Shadows

Shadows bring depth to the interface and bring the user's attention to some specific areas. Use them wisely and sparingly.

Utils are now deprecated!

Utils have been removed from the fluid-design-system library in v5.0.0.
If you want to keep using them, install the @engie-group/fluid-4-deprecated package and import them.

Overview

Shadow 2dp

Shadow 4dp

Shadow 6dp

Shadow 8dp

Shadow 16dp

Shadow 24dp

<div class="nj-shadow-2dp mb-3 p-3">Shadow 2dp</div>
<div class="nj-shadow-4dp mb-3 p-3">Shadow 4dp</div>
<div class="nj-shadow-6dp mb-3 p-3">Shadow 6dp</div>
<div class="nj-shadow-8dp mb-3 p-3">Shadow 8dp</div>
<div class="nj-shadow-16dp mb-3 p-3">Shadow 16dp</div>
<div class="nj-shadow-24dp mb-3 p-3">Shadow 24dp</div>