@ppci/custom-card
v1.3.5
Published
Custom Card
Downloads
26
Readme
Card
Table of contents
Installation
NPM
npm i @ppci/custom-card
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs
Usage
Javascript
import '@ppci/custom-card'
Browser
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-button/builds/index.min.js" />
<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/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;
}