Shadow

Usage #

Superkube has several levels of shadows by default. Use the sh-{size} class to set the element's shadow.

<div class="sh-100"></div>
<div class="sh-150"></div>
<div class="sh-200"></div>
<div class="sh-250"></div>
<div class="sh-300"></div>
<div class="sh-350"></div>

Custom #

Override the value of the shadow variable to change it or add a new modifier with sh- prefix to create a new shadow.

// change
.sh-300 {
    --shadow: 0 10px 20px -4px var(--palette-black-40);
}

// add
.sh-400 {
    --shadow: 0 30px 80px -15px var(--palette-black-30);
}

As a result, the default shadow 300 will get a new value, and the new sh-400 modifier can be used in HTML.

<div class="sh-400">...</div>

Turn off #

Use the sh-off class to turn off the shadow of the element.

<div class="item sh-off">...</div>