ComboStrap Styling - Elevation attribute

1 - About

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


elevation="true|high"

where the value of the attribute sets the scale height of the elevation

4 - Example

4.1 - Button

With a button


<btn>
					A flat button
				</btn>
			


<btn elevation="true">
					Elevated button
				</btn>
			


<btn elevation="high">
					High Elevation
				</btn>
			

4.2 - Card

With a card


<card elevation="high" width="200px">
===== 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="high" width="fit-content" align="center">
   {{:ui:stock_image_surfer_in_the_see.png?400|}}
</box>

Powered by ComboStrap