Best "all-purpose" card to use for wife's dashboard (Red/Yellow/Green only, based on state)

Configuration Frontend
1

I want to set up a quick and easy dashboard for my wife…and basically track various entities like batteries, temperatures, leak conditions, where the only indicators for each entity are:

Red - pay attention, something happened and needs fixing
Yellow - something “may” happen (mostly for batteries)
Green - all good, ignore

Is there a one-size-fits-all method of doing this without getting overly crazy in coding? And yes, the entity states will vary to %, volume, temp, “leak detected” or whatever. No actual temps or % required…really just a “notifier” for when I’m not available to fix something.

2

You could use a markdown card with some Jinja2 code and font color for the traffic light effect.

3

Probably beyond me. I have enough trouble with YAML…sigh. (not my field at all!)

4
5

Have you tried the “tile” card?

1 Like
6

Tile card provides limited state-based control of icon color but not text or background. If that’s not enough, custom config template card might work for you. GitHub - iantrich/config-template-card: 📝 Templatable Lovelace Configurations
This card wraps any? HA card to enable any object in the card as a template.
For example, below is the yaml for 2 button cards where the theme is set based on the state of an input helper.

type: vertical-stack
cards:
  - type: custom:config-template-card
    variables:
      hponstate: states['input_boolean.hponflag'].state
    entities:
      - input_boolean.hponflag
    card:
      show_name: true
      show_icon: false
      type: button
      entity: input_boolean.hponflag
      show_state: true
      theme: "${hponstate === 'on' ? 'qSlate' : 'textcolorchange'}"
      name: On Time
    grid_options:
      columns: 3
      rows: 1
  - type: custom:config-template-card
    variables:
      hpoffstate: states['input_boolean.hpoffflag'].state
    entities:
      - input_boolean.hpoffflag
    card:
      show_name: true
      show_icon: false
      type: button
      entity: input_boolean.hpoffflag
      show_state: true
      theme: "${hpoffstate === 'on' ? 'qSlate' : 'textcolorchange'}"
      name: Off Time
    grid_options:
      columns: 3
      rows: 1
grid_options:
  columns: 3
  rows: auto

Screenshot_20250622_160305_Home Assistant
Screenshot_20250622_160305_Home Assistant308×164 14.6 KB

7

If you do not want to deal with jinja, you may try your luck with JS - either with mentioned config-template-card wrapping any card (supporting js templates), or a custom button card. The latter card (in addition to js templates) supports state-dependent styles with “just yaml”.