Multi State Entities CardFlexible Home Assistant Lovelace Card

Quick Start ​

Add the Status Banner Card to your Home Assistant Lovelace dashboard with just a few lines of YAML:

type: custom:lovelace-multi-state-entities-card
entity: sensor.your_entity
rules:
  - state: "on"
    title: "ACTIVE"
    color: "#4CAF50"
  - state: "off"
    title: "IDLE"
    color: "#9E9E9E"

Documentation & Blueprints ​

Explore our comprehensive documentation and ready-to-use blueprints to get the most out of the Status Banner Card:

• 📖 Guide - Complete documentation for configuration and features
• 🚀 Blueprint Library - 20+ use-cases with direct "Import Blueprint" buttons
• 🎨 Layout Variants - Explore 15+ different UI styles

Featured Use Cases ​

Appliance Monitoring ​

Track appliance status with visual indicators for different states (running, idle, error, etc.)

EV Charging Management ​

Monitor charging progress, estimated completion time, and charging costs

Health & Safety ​

Medication reminders, security alerts, and environmental monitoring

Energy Dashboard ​

Track power consumption, solar production, and battery levels

Installation ​

HACS (Recommended) ​

1. Open HACS in Home Assistant
2. Click the three dots menu → Custom repositories
3. Add johnneerdael/lovelace-multi-state-entities-card as a Lovelace repository
4. Search for "Lovelace Multi State Entities Card" and install
5. Refresh your browser

Manual Installation ​

1. Download lovelace-multi-state-entities-card.js from the latest release
2. Copy to /config/www/lovelace-multi-state-entities-card.js
3. Add resource in Home Assistant:
   • Go to Settings → Dashboards → Resources
   • Add /local/lovelace-multi-state-entities-card.js as JavaScript Module

Credits ​

Inspired by the tailwindcss-template-card and the Home Assistant boilerplate-card.