---json
{
    "description": "Shadows are used mostly to add more emphasis to important component or to add a elevation effect. ",
    "page_id": "d1ed71dhvj2nv2b9wvsz9",
    "title": "Shadow - This attribute will create a shadow, giving more emphasis"
}
---

====== ComboStrap Styling - Shadow attribute  (Elevation) ======


===== About =====
''shadow'' (known also as ''elevation'') is a [[docs:styling:styling|styling attribute]] that elevates a [[docs:block:block|block]].

It adds a ''shadow'' and gives the block more [[docs:styling:emphasis|emphasis]].


As [[color|color]], it helps prioritizing the components on your page in order to guide the viewer's eyes.

It's mostly used on a ''call-to-action'' component such as a [[docs:content:button|button]].


===== Syntax =====

To add a shadow, you can use the ''shadow'' attribute or its alias ''elevation''.
<code html>
elevation="sm|md|lg|1"
shadow="sm|md|lg|1"
</code>
where the value of the attribute sets the scale height of the elevation

^ Value ^ OnHover Animation Name ^ Name ^
| ''sm'' | ''shadow-sm'' | Small |
| ''md'' | ''shadow-md'' | Medium |
| ''lg'' | ''shadow-lg'' | Large |
| ''xl'' | ''shadow-xl'' | Extra-Large |
| ''true'', ''1'' | ''shadow'' | [[#default|Default]] |

<note>
The '' OnHover animation name'' is the name that can be used to apply a shadow when the mouse [[docs:animation:hover|is over]] an element
. See the [[#on hover|example]]
</note>

<badge>Elevation since [[release:release#version_112|version 1.12]], Shadow since [[release:release#version_114|version 1.14]]</badge>
===== Example =====

==== Button ====

With a [[docs:content:button|button]]


<row>
	<cell>
		<webcode name="Flat" >
<code dw>
<btn>
Flat
</btn>
</code>
		</webcode>
	</cell>
	<cell>
		<webcode name="Small" >
<code dw>
<btn shadow="sm">
Small Shadow
</btn>
</code>
		</webcode>
	</cell>

<cell>
<webcode name="DefaultElevation">
    <code dw>
<btn shadow="md">
Medium Shadow
</btn>
    </code>
</webcode>
</cell>

<cell>
<webcode name="DefaultElevationWithBoolean">
    <code dw>
<btn primary shadow>
Default Shadow
</btn>
    </code>
</webcode>
</cell>

	<cell>
		<webcode name="HighElevation">
<code dw>
<btn shadow="lg">
Large Shadow
</btn>
</code>
		</webcode>
	</cell>
<cell>
		<webcode name="HighElevation">
<code dw>
<btn shadow="xl">
Extra-Large Shadow
</btn>
</code>
		</webcode>
	</cell>
</row>

==== Card ====
With a [[docs:block:card|card]]
<webcode name="cardElevation" >
<code dw>
<card shadow="xl" width="200px">
===== Elevated card =====
Guide on how to elevate
</card>
</code>
</webcode>

==== Image ====
With a [[docs:content:image|image]] and a [[docs:layout:component:box|box]]

<webcode name="imgElevation" >
<code dw>
<box shadow="lg" width="fit-content" align="center">
   {{:docs:block:stock_image_surfer_in_the_see.png?400|}}
</box>
</code>
</webcode>

==== On Hover ====
You can also apply a shadow [[docs:animation:hover|on hover]] with the [[#syntax|shadow animation name]]

Example with a large shadow.
<webcode name="imgElevation" >
<code dw>
<box onHover="shadow-lg" width="fit-content" align="center">
    {{:docs:styling:subway_card_tile.png|}}
</box>
</code>
</webcode>



===== Configuration =====
==== default ====

You can change the default level of shadow with the ''defaultShadowLevel'' [[docs:app:configuration|configuration]].