Card

A card element

Table of contents

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

Events

Changelog

1.0.0 ( Major )

• Initial version of the custom card.