Advanced Status Lovelace Card with flexible state rules - Perfect for where you want to track many states

@kohnneerdael/status-banner-card

Cross-post but this time in the right place.

What is it
A flexible Home Assistant Lovelace card with a distinctive banner design for displaying entity states. This card excels at displaying “Call to Action” information—situations where the user needs to know something immediately or do something specific with full UI support. Because of the distinct banner style and the ability to map colors to a flexible number of states, it works best for cards that should support 2 or more different types of states differently. Unique is that the card has no limit to the number of states or associated state colors that you want to report on.

Examples

You can make tons of visual changes straight from the UI and it can be use for a endless amount of ideas, just for some inspiration:

This card excels at displaying “Call to Action” information—situations where the user needs to know something immediately or do something specific. Because of the distinct banner style and the ability to map colors to urgency, it works best for binary or ternary states (Good/Warning/Critical).

:house: Home Maintenance & Chores

  • Washer/Dryer Status
    • State: Running / Finished / Idle
    • Banner: “LAUNDRY COMPLETE” (Green) vs “WASHING” (Blue)
    • Subtitle: “Cycle finished 10m ago” or “Time remaining: 15m”
    • Status Text: “Please move clothes to dryer.”
  • Dishwasher Cycle
    • State: Clean / Dirty / Running
    • Banner: “DISHES CLEAN” (Green) vs “RUNNING” (Blue)
    • Subtitle: “Ready to empty”
    • Status Text: “Cycle finished at 19:30.”
  • HVAC Filter Replacement
    • State: OK / Replace Soon / Overdue
    • Banner: “FILTER REPLACE” (Red) vs “AIR SYSTEM OK” (Green)
    • Subtitle: “Runtime: 300 hours”
    • Status Text: “Airflow restriction detected. Order generic size 20x20x1.”
  • Robotic Vacuum
    • State: Docked / Cleaning / Stuck / Bin Full
    • Banner: “ROBOROCK STUCK” (Red) or “CLEANING” (Blue)
    • Subtitle: “Location: Living Room”
    • Status Text: “Main brush entangled” or “Returning to dock to empty bin.”

:shield: Security & Safety

  • Perimeter/Window Monitor
    • State: Secure / Open / Raining & Open
    • Banner: “CLOSE WINDOWS” (Red) vs “HOUSE SECURE” (Green)
    • Subtitle: “Rain detected”
    • Status Text: “Master Bedroom window is currently open while it is raining.”
  • Garage Door Monitor
    • State: Closed / Open < 10m / Left Open
    • Banner: “GARAGE LEFT OPEN” (Red/Stripe)
    • Subtitle: “Open for 45 minutes”
    • Status Text: “No motion detected in garage. Tap to close.”
  • Smart Lock / Guest Access
    • State: Locked / Unlocked / Jammed
    • Banner: “FRONT DOOR UNLOCKED” (Orange)
    • Subtitle: “Auto-lock disabled”
    • Status Text: “Unlocked by ‘Cleaner Code’ at 10:00 AM.”
  • Leak Detection System
    • State: Dry / Leak Detected
    • Banner: “WATER LEAK DETECTED” (Red/Stripe)
    • Subtitle: “Location: Basement”
    • Status Text: “Main water valve has been shut off automatically.”

:herb: Environment & Health

  • Air Quality (CO2/PM2.5)
    • State: Good / Moderate / Unhealthy
    • Banner: “AIR QUALITY POOR” (Purple)
    • Subtitle: “CO2: 1200ppm”
    • Status Text: “Ventilation required. Open a window or boost HVAC fan.”
  • Plant Care (Aggregated)
    • State: Thriving / Thirsty / Fertilize
    • Banner: “WATER PLANTS” (Blue)
    • Subtitle: “3 Plants Critical”
    • Status Text: “Peace Lily and Monstera moisture levels below 15%.”
  • Pollen/Allergy Forecast
    • State: Low / High / Extreme
    • Banner: “HIGH POLLEN ALERT” (Orange)
    • Subtitle: “Tree Pollen: High”
    • Status Text: “Keep windows closed today. Air purifier set to High.”

:zap: Energy & Network

  • Grid Power Status (Solar)
    • State: Importing / Exporting / Peak Rate
    • Banner: “FREE ENERGY” (Green) vs “PEAK RATE” (Red)
    • Subtitle: “Solar Export: 3.2kW”
    • Status Text: “Great time to run the dishwasher or charge the car.”
  • Home Battery Backup
    • State: Charging / Discharging / Grid Outage
    • Banner: “RUNNING ON BATTERY” (Orange/Stripe)
    • Subtitle: “Grid Power Lost”
    • Status Text: “Est. runtime: 4 hours. Heavy loads (AC) disabled.”
  • Network/Server Health
    • State: Online / Offline / Degraded
    • Banner: “INTERNET DOWN” (Red)
    • Subtitle: “WAN IP Unreachable”
    • Status Text: "UDM Pro has been offline for 5 minutes. Attempting reboot.
  • 3D Printer Status
    • State: Printing / Finished / Error
    • Banner: “PRINT COMPLETE” (Green)
    • Subtitle: “File: Bracket_v2.gcode”
    • Status Text: “Bed cooled to 30°C. Safe to remove object.”

:family_man_woman_girl: Family & Lifestyle

  • Commute Traffic
    • State: Clear / Moderate / Heavy
    • Banner: “HEAVY TRAFFIC” (Red)
    • Subtitle: “+25 mins delay”
    • Status Text: “Accident on I-95. Suggest taking alternate route via Highway 1.”
  • Mail/Package Delivery
    • State: Empty / Mail Arrived / Package Retrieved
    • Banner: “YOU’VE GOT MAIL” (Yellow)
    • Subtitle: “Vibration detected”
    • Status Text: “Mailbox opened at 14:05. Not yet retrieved.”
  • Family Presence / House Mode
    • State: Home / Away / Vacation / Guest
    • Banner: “GUEST MODE ACTIVE” (Purple)
    • Subtitle: “Automations Paused”
    • Status Text: “Lighting motion sensors disabled. Alarm auto-arm disabled.”
  • Medication/Vitamin Reminder
    • State: Taken / Due / Missed
    • Banner: “TAKE MEDICATION” (Red)
    • Subtitle: “Morning Dose”
    • Status Text: “Button last pressed yesterday. Please acknowledge.”
  • Groceries / Shopping List
    • State: Empty / Items Pending
    • Banner: “SHOPPING NEEDED” (Blue)
    • Subtitle: “5 items on list”
    • Status Text: “Milk, Eggs, Bread. Tap to view full Todoist list.”
2 Likes

Except a heap of updates, adjsust potition of title and subtitle, put the accent ANYWHERE , even filling the entire background, but also start ffrom any other corder plus free control over timestamp amd button slignment on top of color config changes to all elements in case yoou want them overlapping with the text.

I hope someone is hoing to happy with it and use-t