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