Example custom card for Home Assistant. Created during Github Open Source Friday on Feb 19, 2021.

example-card.js

/*

To use in Home Assistant, configure card:

type: 'custom:example-card'
entities:
  - switch.wemo_insight
  - light.bed_light
  - light.ceiling_lights
  - light.kitchen_lights

*/
import {
    LitElement,
    html,
    css
  } from "https://unpkg.com/[email protected]/lit-element.js?module";

  import "https://unpkg.com/[email protected]/lib/wired-card.js?module";
  import "https://unpkg.com/[email protected]/lib/wired-toggle.js?module";

class MyExample extends LitElement {
    static get properties() {
      return {
        hass: {},
        config: {}
      };
    }
  
    render() {
      return html`
      <wired-card elevation=2>
        ${this.config.entities.map(ent => {
          const state = this.hass.states[ent];
          if (!state) { return; }
          return html`
          <div>
            ${state.attributes.friendly_name}
            <wired-toggle
              .checked=${state.state === 'on'}
              @change=${() => this.hass.callService(
                'homeassistant', 'toggle',
                {
                  entity_id: state.entity_id
                }
              )}
            ></wired-toggle>
          </div>
          `;
        })}
      </wired-card>
      `;
    }
  
    setConfig(config) {
      this.config = config;
    }
  
    static get styles() {
      return css`
        wired-card {
          display: block;
        }
      
        div {
          display: flex;
          justify-content: space-between;
          padding: 8px;
          align-items: center;
        }
      `;
    }
  }
  customElements.define("example-card", MyExample);