Welcome to project Axiom!

Project Axiom is a web component set which aims to combine good part of Fluent Design System and Material Design to a single design language.

This repo contains code of Elevation shadow effect of Fluent design System.

To use this package, install by one of following:

Load the package directly:

<script src="https://unpkg.com/@ax-design/elevation" />

Load the package by esmodule:

<script type="module">
import { register } from 'https://unpkg.com/@ax-design/elevation/es/index.js'
register()
</script>

Load the package by module loader or bundler:
yarn add @ax-design/elevation or npm i @ax-design/elevation

CommonJS

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

ESModule

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

Project Axiom is a web component set which aims to combine good part of Fluent Design System and Material Design to a single design language.

This repo contains code of Elevation shadow effect of Fluent design System.

Elevation!

Using the element

In order to use this component, we need to prepare some HTML:

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

And some CSS:

.my-shadow{
  --elevation-depth: 4;
}

Elevation!

.my-shadow{
  --elevation-depth: 128;
}