@ax-design/elevation

Web component that implement elevation texture of Axiom Design System.

Usage no npm install needed!

<script type="module">
  import axDesignElevation from 'https://cdn.skypack.dev/@ax-design/elevation';
</script>

README

elevation

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

npm version CI Status MIT Licence

Screenshot

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.