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

Usage

Add wired-card to your project:

npm i wired-card

Import wired-card definition into your HTML page:

<script type="module" src="wired-card/lib/wired-card.js"></script>

Or into your module script:

import { WiredCard } from "wired-card"

Use it in your web page:

<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 (c) Preet Shihn

Change Log

All notable changes to this project will be documented in this file.

[2.0.0] - October 19, 2019

• New component: wired-video Video player with the hand-drawn look
• New component: wired-calendar is a calendar component contributed by @elingerojo
• New component: wired-dialog emulates dialogs
• New component: wired-divider Draws a sketchy horizontal line between two sections
• New component: wired-image Image component that frames the image in a sketchy border
• New component: wired-link Akin to <a> tag, a link with href, and a sketchy underline
• New component: wired-search-input is a text input emulating a search input
• wired-card now supports a sketchy filled background
• wired-slider is more accessible, now built on top of input range.
• Elements are more responsive to size changes using the Resize observer
• wired-textarea does not auto-grow anymore.

[1.0.0] - April 24, 2019

• New component: wired-fab mimics the floating action button proposed in Material design
• New component: wired-spinner to show pending progress in a sketchy way
• New component: wired-tabs
• Selection in Combo and List is now shown with a sketchy zig-zag fill in the style of rough.js
• Sketchy fill also applied to progress boxes
• Better Accessibility on all components
• Refactored code to use TypeScript and latest Lit Element