Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manufosela/data-card
Data Card Web Component with Lit Element
https://github.com/manufosela/data-card
Last synced: 4 days ago
JSON representation
Data Card Web Component with Lit Element
- Host: GitHub
- URL: https://github.com/manufosela/data-card
- Owner: manufosela
- License: other
- Created: 2019-07-29T20:52:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:56:04.000Z (almost 2 years ago)
- Last Synced: 2023-03-24T12:03:54.675Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 153 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# data-card
Lit-Element web component description
## Demo
```
Basic data-card Demo
Demo
```
```html
```
## Attributes
* title (String): Card title.
* description(String): Card description.
* url (String): Url to show card information.
* icon (String): from *fa-icons* colection.
* [group] (String): a organization/clasification mode
* [newtab] (Boolean): by default is false (target "_self"). When true, target is "_blank"
* [moreinfo] (String): 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
```
## Install the Polymer-CLI
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.
## Viewing Your Element
```
$ polymer serve
```
## Running Tests
```
$ polymer test
```
## Build
```
$ npm run build
```
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
##Author
**@manufosela**
## License
This project is licensed under the Apache 2.0 License - see the [LICENSE](LICENSE) file for details
## Generated
**generator-lit-element-base** - *yeoman npm package* - by [@manufosela](https://github.com/manufosela/generator-litelement-webcomponent)