Name	Description	Default	Control
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

No Preview

Sorry, but you either have no stories or none are selected somehow.

Please check the Storybook config.
Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Box Shadow

Overview
Guidelines
Tokens

Overview

Shadow is used to give the illusion of perspective to flat design elements, mainly when you want to convey a higher level of importance to certain elements within the design.

Guidelines

🥑Do's

Use to create a sense of depth and visual hierarchy.

❌Don'ts

Do not use in text or fonts.
Do not modify the color of shadow.

Tokens

Example	Description	Token
0px 0px 0px 0px, 0%	None shadow Elements without shadow
0px 0px 2px 0px, 50%	Shadow SM Static elements, not clickable.	`map-get($shadow, sm)`
0px 1px 6px 0px, 20% 0px 1px 2px 1px, 8%	Shadow MD Clickable elements: regular state.	`map-get($shadow, md)`
0px 2px 16px 0px, 30% 0px 0px 4px 1px, 8%	Shadow LG Clickable elements: hover state.	`map-get($shadow, lg)`
0px 2px 4px 0px, 15%	Shadow ELEVATE Static elements that require showing elevation.	`map-get($shadow, elevate)`