Ssstyles › Shadow

Source

The shadow component will allow you to use a pleasing box-shadow in five levels of size. The shadow size is calculated from the custom property --shadow-level, in case you need to add your own values.

Prepending the level with -hover will increase it's level on hover by 1.

You need to import the CSS file and assign the data attribute to use it.

@import "ssstyles/css/shadow.css" layer(components);

# Shadow levels

<div data-shadow="1"></div>
<div data-shadow="2"></div>
<div data-shadow="3"></div>
<div data-shadow="4"></div>
<div data-shadow="5"></div>

# Hover

<div data-shadow="3-hover"></div>