Shadows

Add or remove shadows to elements with box-shadow utilities.

Default#

The default shadow may be used for all elements that are displayed with a better recognition in contrast to the website background. You can add this box-shadow to any block like element with the utility class .shadow. You can also use the SCSS variable $box-shadow to set this box-shadow.

<div class="shadow p-2">Default shadow</div>

Strong#

The strong shadow improves the mentioned contrast to the website background even more. You can add this box-shadow to any block like element with the utility class .shadow-strong. You can also use the SCSS variable $box-shadow-strong to set this box-shadow.

<div class="shadow-strong p-2">Strong shadow</div>

Flyout#

The special flyout shadow is created especially for superimposed elements. You can add this box-shadow to any block like element with the utility class .shadow-flyout. You can also use the SCSS variable $box-shadow-flyout to set this box-shadow.

<div class="shadow-flyout p-2">Flyout shadow</div>