Web component that implements Elevation shadow effect of Axiom Design System.

Installation

// with npm
npm install @ax-design/elevation

// with yarn
yarn add @ax-design/elevation

and import it:

//CommonJS
require('@ax-design/elevation').register();

//ESModule
import { register } from '@ax-design/elevation';
register();

Usage

To add a reveal effect on your web application, you need to wrap a ax-elevation component with the component you want to add elevation depth. Here's an example:

<ax-elevation>
  elevation!
</ax-elevation>

Style Controlling

elevation component uses custom properties to manage the style of the elevation depth.

--elevation-depth

Type: <number>

Default: 0

Description: The depth of elevation shadow.