Package Exports

@ppci/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/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

A card element

Installation
Usage
Theme | Styling
Properties
Events
Changelog

Installation

CDN

  <script type='module' src="http://developer.powerpeers.com/social/1.0.0/custom-card.js" />

NPM

  npm i @ppci/custom-card

Usage

// Javascript import
import '@ppci/custom-card'

<!-- or module import -->
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/custom-card.js" />

const onCardClick = (event) => {
  const { id } = event.detail;
}

<custom-card
  dataId="1"
  imageUrl="http://domain.com/image.jpg"
  title="Card Title"
  subtitle="Card Subtitle"
  @card-click=${onCardClick}>

  <div>Add additional slotted content here</div>

</custom-card>

Theme

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
dataId	string	Use this as an identifier	`1` `69acf486-96f3`
title	string	Title of the card
subtitle	string	Subtitle of the card
imageUrl	string	Local or global image url	`http://domain.com/image.jpg` `/images/image.jpg`
href	string [optional]	Link of the card.	`http://domain.com`
target	string [optional]	Target of the link.	`_blank` `_self` `_parent` `_top`
Theme
theme-powerpeers	boolean	Apply predefined powerpeers theme	```html ```

Events

Name	Description	Detail / Payload
@card-click	Card has been clicked	```{ id: '1' }```

Changelog

1.0.0 ( Major )

Initial version of the custom card.

@ppci/custom-card