Foundation
ElevationSvenska Spels elevation levels are accessible as classes
If a hover state is needed, add className="elevation-auto-raise" and you will get the correct hover state. - Should only be used when the whole object is clickable.
For objects with odd shapes, the filter drop shadow property can be used. Simply add -filter to the desired elevation level. e.g. className="elevation-300-filter"
Live examples
Standard elevation levels
Elevation-100
Elevation-200
Elevation-300
Elevation-400
Elevation-600
Elevation-800
Elevation-1200
Elevation-1600
Elevation-2400
Code
<div className="elevation-100">Elevation-100</div>
<div className="elevation-200">Elevation-200</div>
<div className="elevation-300">Elevation-300</div>
<div className="elevation-400">Elevation-400</div>
<div className="elevation-600">Elevation-600</div>
<div className="elevation-800">Elevation-800</div>
<div className="elevation-1200">Elevation-1200</div>
<div className="elevation-1600">Elevation-1600</div>
<div className="elevation-2400">Elevation-2400</div>With auto raise - hover to see effect
Elevation-100
Elevation-200
Elevation-300
Elevation-400
Elevation-600
Elevation-800
Elevation-1200
Elevation-1600
Code
<div className="elevation-100 elevation-auto-raise">Elevation-100</div>
<div className="elevation-200 elevation-auto-raise">Elevation-200</div>
<div className="elevation-300 elevation-auto-raise">Elevation-300</div>
<div className="elevation-400 elevation-auto-raise">Elevation-400</div>
<div className="elevation-600 elevation-auto-raise">Elevation-600</div>
<div className="elevation-800 elevation-auto-raise">Elevation-800</div>
<div className="elevation-1200 elevation-auto-raise">Elevation-1200</div>
<div className="elevation-1600 elevation-auto-raise">Elevation-1600</div>