# @limetech/mdc-p2-elevation
> Material Components for the web mixins + CSS Classes for Material Design elevation
Latest version **4.0.0** (published 2019-12-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install @limetech/mdc-p2-elevation
pnpm add @limetech/mdc-p2-elevation
yarn add @limetech/mdc-p2-elevation
bun add @limetech/mdc-p2-elevation
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 4.0.0 |
| Published | 2019-12-09 |
| First published | 2019-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | specularrain, cybercap, flippare, calleboketoft, thomaslundstrom |
| Keywords | material components, material design, elevation |
## Links
- npm: https://www.npmjs.com/package/@limetech/mdc-p2-elevation
- Repository: https://github.com/Lundalogik/material-components-web
- Homepage: https://github.com/Lundalogik/material-components-web#readme
- Issues: https://github.com/Lundalogik/material-components-web/issues
- npm.io page: https://npm.io/package/@limetech/mdc-p2-elevation
## Dependencies (3)
- [@limetech/mdc-p2-theme](https://npm.io/package/@limetech/mdc-p2-theme.md) ^4.0.0
- [@limetech/mdc-p2-animation](https://npm.io/package/@limetech/mdc-p2-animation.md) ^4.0.0
- [@limetech/mdc-p2-feature-targeting](https://npm.io/package/@limetech/mdc-p2-feature-targeting.md) ^4.0.0
## Recent versions
- 4.0.0 (latest) — 2019-12-09
## README
[](https://www.npmjs.com/package/material-components-web)
[](https://travis-ci.com/material-components/material-components-web/)
[](https://codecov.io/gh/material-components/material-components-web)
[](https://discord.gg/material-components)
[](https://us-central1-material-components-web.cloudfunctions.net/screenshot-shield-url)
# Material Components for the web
Material Components for the web (MDC Web) helps developers execute [Material Design](https://www.material.io).
Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.
MDC Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.
Material Components for the web is the successor to [Material Design Lite](https://getmdl.io/). In addition to implementing the [Material Design guidelines](https://material.io/design), it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically [architected](docs/code/architecture.md) for adaptability to various [major web frameworks](docs/framework-wrappers.md).
> NOTE: Material Components Web tends to release breaking changes on a monthly basis, but follows
> [semver](https://semver.org/) so you can control when you incorporate them.
> We typically follow a 2-week release schedule which includes one major release per month with breaking changes,
> and intermediate patch releases with bug fixes.
## Important links
- [Getting Started Guide](docs/getting-started.md)
- [Demos](https://material-components.github.io/material-components-web-catalog)
- [MDC Web on other frameworks](docs/framework-wrappers.md)
- [Examples using MDC Web](docs/examples.md)
- [Contributing](CONTRIBUTING.md)
- [Material Design Guidelines](https://material.io/design) (external site)
- [Supported browsers](docs/supported-browsers.md)
- [All Components](packages/)
- [Changelog](./CHANGELOG.md)
- [Roadmap](./ROADMAP.md)
## Quick start
### Using via CDN
```html
```
> Please see [quick start demo](https://codepen.io/abhiomkar/pen/gQWarJ) on codepen for full example.
### Using NPM
> This guide assumes you have webpack configured to compile Sass into CSS. To configure webpack, please see the full [getting started guide](docs/getting-started.md). You can also see the final code and result in the [Material Starter Kit](https://glitch.com/~material-starter-kit).
Install textfield node module to your project.
```
npm install @material/textfield
```
#### HTML
Sample usage of text field component. Please see [MDC Textfield](packages/mdc-textfield) component page for more options.
```html
```
#### CSS
Load styles required for text field component.
```scss
@import "@material/textfield/mdc-text-field";
```
#### JavaScript
Import `MDCTextField` module to instantiate text field component.
```js
import {MDCTextField} from '@material/textfield/index';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
```
This'll initialize text field component on a single `.mdc-text-field` element.
> Please see [quick start demo](https://glitch.com/~mdc-web-quick-start) on glitch for full example.
## Need help?
We're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on our [Discord Channel](https://discord.gg/material-components).
## Thank you
Third-party services that we use and are thankful to:
- [Travis CI](https://travis-ci.com/) for CI.
- [Sauce Labs](https://saucelabs.com/) for unit testing.
- [CrossBrowserTesting](https://crossbrowsertesting.com/) for [screenshot testing](test/screenshot/).
---
_Source: https://npm.io/package/@limetech/mdc-p2-elevation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
