@ppci/custom-card

Card

Table of contents

• Installation
• Usage
• Styling
• Properties
• Events

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;
}

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' }```