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.

elevation="sm|md|lg|1"
shadow="sm|md|lg|1"

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>
Flat
</btn>

<btn shadow="sm">
Small Shadow
</btn>

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

<btn shadow="lg">
Large Shadow
</btn>

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

4.2 - Card

With a card

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

Elevated card

Guide on how to elevate

4.3 - Image

With a image and a box

<box elevation="lg" width="fit-content" align="center">
   {{:ui:stock_image_surfer_in_the_see.png?400|}}
</box>

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">
    {{:styling:subway_card_tile.png|}}
</box>

5 - Configuration

5.1 - default

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

6 - Documentation / Reference

Powered by ComboStrap