Have ideas to improve npm?Join in the discussion! »

demo-wc-card

0.1.0 • Public • Published

<demo-wc-card>

A content frame that looks like a card with a back and front side.

import { html } from 'lit-html';
import './demo-wc-card.js';
export const usage = () => {
  return html`
    <demo-wc-card></demo-wc-card>
  `;
};

Installation

npm i demo-wc-card

Usage

import 'demo-wc-card/demo-wc-card.js';
<demo-wc-card></demo-wc-card>

API

You can provide multiple options to adjust the output like so.

Header

You can give it a different header by providing it as a string

export const header = () => {
  return html`
    <demo-wc-card .header=${'my new header'}></demo-wc-card>
  `;
};

BackSide

You wanna show the back side first? use the back-side as an attribute.

export const backSide = () => {
  return html`
    <demo-wc-card back-side></demo-wc-card>
  `;
};

Variations

See more variations here.

export default {
  title: 'Demo Card/Main',
};

Keywords

none

Install

npm i demo-wc-card

DownloadsWeekly Downloads

56

Version

0.1.0

License

MIT

Unpacked Size

14 kB

Total Files

17

Last publish

Collaborators

  • avatar