Shadow - This attribute will create a shadow, giving more emphasis

Undraw My Documents

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.

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

Example

Button

With a button

<btn>
Flat
</btn>

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

<btn shadow="md">
Medium Shadow
</btn>
    

<btn primary shadow>
Default Shadow
</btn>
    

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

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

Card

With a card

<card shadow="xl" width="200px">
===== Elevated card =====
Guide on how to elevate
</card>
Elevated card

Guide on how to elevate

Image

With a image and a box

<box shadow="lg" width="fit-content" align="center">
   {{:docs:block:stock_image_surfer_in_the_see.png?400|}}
</box>
Stock Image Surfer In The See

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

Configuration

default

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




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw My Documents
ComboStrap - Font Size Typographic Attribute

How to set the font-size with the font-size attribute
Undraw My Documents
ComboStrap Styling - Design System

The ComboStrap design system takes all the good part of Boostrap but does not stop there as it also integrates Google Material Design recommandations ComboStrap applies the following Google...
Undraw My Documents
ComboStrap Styling - Skin attribute (Button Emphasis Control)

skin is a ComboStrap styling attribute that defines the emphasis level of your button by applying a set of standard styling attribute on: color elevation (shadow) and border where value is one...
Undraw Add Content Re Vgqa
ComboStrap UI - Button

Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With...
Undraw My Documents
ComboStrap UI - Styling

Styling in ComboStrap is the possibility to render every component as you wish. ComboStrap has three levels of styling: the bootstrap stylesheet level - bootstrap standard theme the user stylesheet...
Undraw My Documents
Hover animation

Improve the emphasis of your component by adding onHover animation
Undraw My Documents
How to add emphasis in your website (ComboStrap)

This article shows you how you can add emphasis on component in your page
SVG to fitViewport 1Viewport 2--------------- meet ---------------xMin*xMid*xMax*---------- meet ----------*YMin*YMid*YMax---------- slice ----------xMin*xMid*xMax*--------------- slice ---------------*YMin*YMid*YMax
How to use a SVG in ComboStrap

ComboStrap supports natively SVG and allows you to use them as image, illustration and background
Stock Image Surfer In The See
How to use the image tag in ComboStrap

Combostrap supports raster and vector images. This page shows you how to add an image with syntax and examples.



Task Runner