ComboStrap Styling - Shadow attribute (Elevation)

1 - About

shadow (known also as elevation) is a styling attribute that elevates a block.

It adds a shadow and gives the block more emphasis.

As 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 button.

3 - Syntax

To add a shadow, you can use the shadow attribute or its alias elevation.


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
The OnHover animation name is the name that can be used to apply a shadow when the mouse is over an element . See the example

Elevation since version 1.12, Shadow since version 1.14

4 - Example

4.1 - Button

With a button


<btn shadow="sm">
Small Shadow

<btn shadow="true">
Default (Medium)

<btn shadow="lg">
Large Shadow

<btn shadow="xl">
Extra-Large Shadow

4.2 - Card

With a card

<card elevation="xl" width="200px" text-align="center">
===== Elevated card =====
Guide on how to elevate

Elevated card

Guide on how to elevate

4.3 - Image

With a image and a box

<box elevation="lg" width="fit-content" align="center">

4.4 - On Hover

You can also apply a shadow on hover with the shadow animation name

Example with a large shadow.

<box onHover="shadow-lg" width="fit-content" align="center">

5 - Configuration

5.1 - default

You can change the default level of shadow with the defaultShadowLevel configuration.

6 - Documentation / Reference

Powered by ComboStrap