Elevation

Svenska 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

Code

<div className={styles.wrapper}>
  <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>
</div>

With auto raise - hover to see effect

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>