Package Exports

@ppci-mock/custom-card

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ppci-mock/custom-card) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Card

Installation
Usage
Styling
Properties
Events

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

@ppci-mock/custom-card