Data-card NPM | npm.io

data-card

Lit-Element web component description

Demo

<h2>Basic data-card Demo</h2>
<h3>Demo</h3>
<data-card></data-card>

<data-card></data-card>

Attributes

title (String): Card title.
description(String): Card description.
url (String): Url to show card information.
icon (String): from fa-icons colection.
group: a organization/clasification mode
newtab: by default is false (target "_self"). When true, target is "_blank"
moreinfo: URL with card's extra information. By default is empty. When url, fetch the contain and create a modal.

Default values CSS Variables

--card-width: 210px;
--card-height: 16rem;
--card-background-color: #ffffff;
--card-border: #ff7900 solid 5px;
--card-margin: 1.5rem 0.7rem;
--card-padding: 1.5rem 0;
--card-title-padding-bottom: 0.75rem;
--card-title-size: 24px;
--card-title-color: #212121;
--card-description-size: 16px;
--card-description-color: #575756;
--card-icon-size: 5.5rem;
--card-icon-color: #FF7900;

Install

npm install data-card

Use

<html>
  <head>
    <script type="module" src="../data-card.js"></script>
  </head>
  <body>
    <data-card></data-card>
  </body>
</html>

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.