Card
Table of contents
Installation
NPM
npm i @ppci-mock/custom-card
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs
Usage
Javascript
import '@ppci-mock/custom-card'
Browser
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-button/builds/index.min.js" />
<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-button/builds/legacy.min.js" />
<!-- Component -->
<custom-card
sourceId=${String}
title=${String}
subtitle=${String}
description=${String}
imageUrl=${String}
.sourceMix=${Object}
@card-click=${Function}
?hoverEffect=${Boolean}
>
<div>Add additional slotted content here</div>
</custom-card>
Styling
We have a predefined powerpeers theme ready for you! Just add the theme-powerpeers boolean attribute to your custom-card.
<custom-card
theme-powerpeers>
</custom-card>
Not completely satisfied with our powerpeers theme? Well you can do it yourself. We have a set of css variables available for you.
custom-card {
--theme-card-background: white;
--theme-border-radius: 4px;
}
Properties
Property | Type | Description | Possible Values |
*sourceId* | String | Use this as an identifier | `1` `69acf486-96f3` |
*title* | String | Title of the card | |
*subtitle* | String | Subtitle of the card | |
description | String | Description of the card | |
*imageUrl* | String | Local or global image url | `http://domain.com/image.jpg` `/images/image.jpg` |
sourceMix | Object | Sourcemix details | |
hoverEffect | Boolean | Show or hide the hover effect | True/False |
Theme | |||
theme-powerpeers | Boolean | Apply predefined powerpeers theme | ```html ``` |
Events
Name | Description | Payload |
@card-click | Card has been clicked | ```{ id: '1' }``` |