# wired-card

> Hand-drawn sketchy card web component

Latest version **2.1.0** (published 2020-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install wired-card
pnpm add wired-card
yarn add wired-card
bun add wired-card
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score; popular repo.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2020-06-19 |
| First published | 2018-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10850 |
| Author | Preet Shihn |
| Maintainers | shihn |
| Keywords | card, webcomponent, web component, rough, sketchy, hand-drawn, hand drawn, wireframe |

## Links

- npm: https://www.npmjs.com/package/wired-card
- Repository: https://github.com/wiredjs/wired-elements
- Homepage: https://github.com/wiredjs/wired-elements#readme
- Issues: https://github.com/wiredjs/wired-elements/issues
- npm.io page: https://npm.io/package/wired-card

## Dependencies (2)

- [wired-lib](https://npm.io/package/wired-lib.md) ^2.1.0
- [lit-element](https://npm.io/package/lit-element.md) ^2.3.1

## Alternatives

- [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads
- [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads
- [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads
- [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads
- [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2020-06-19
- 2.0.2 — 2020-03-15
- 2.0.0 — 2019-10-19
- 2.0.0-alpha.1 — 2019-10-18
- 2.0.0-alpha.0 — 2019-10-15
- 1.0.0 — 2019-04-24
- 1.0.0-alpha.0 — 2019-04-24
- 0.9.1 — 2019-04-15
- 0.9.0 — 2019-04-13
- 0.9.0-1 — 2019-03-02
- 0.9.0-0 — 2019-03-02
- 0.8.1 — 2018-09-29
- 0.8.0 — 2018-09-29
- 0.8.0-0 — 2018-09-29
- 0.6.5 — 2018-06-21
- … 4 more at https://npm.io/package/wired-card/versions

## README

![wired card](https://wiredjs.github.io/wired-elements/images/card.png)

# wired-card

wired-card is a container for other web elements - with a hand-drawn, wireframe like, look.

For demo and view the complete set of wired-elememts: [wiredjs.com](http://wiredjs.com/)

## Usage

Add wired-card to your project:
```
npm i wired-card
```
Import wired-card definition into your HTML page:
```html
<script type="module" src="wired-card/lib/wired-card.js"></script>
```
Or into your module script:
```javascript
import { WiredCard } from "wired-card"
```

Use it in your web page:
```html
<wired-card>
  <p>Elevation: 1</p>
</wired-card>

<wired-card elevation="3">
  <p>Elevation: 3</p>
</wired-card>
```

## Properties

**elevation** - Numerical number between 1-5 (inclusive) - sets the elevation of the card. Default is 1.

**fill** - A color to fill the background of the card in a sketchy format

## Methods

**requestUpdate()** - When dynamically adding content to the card, call this method to recompute the boundaries of the card. 

## License
[MIT License](https://github.com/wiredjs/wired-elements/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)

---
_Source: https://npm.io/package/wired-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._