So… I basically started over on my Thermostat card. I used the grid-area example (of and rPI monitor card) from here:
GitHub - custom-cards/button-card: 
Lovelace button-card for home assistant
and modified it thusly:
- type: horizontal-stack
cards:
- entity: climate.thermostat_2
type: 'custom:button-card'
icon: 'mdi:thermostat'
aspect_ratio: 3/2
name: Thermostat 2
styles:
card:
- background-color: darkBlue
- border-radius: 0%
- padding: 0%
- color: ivory
- font-size: 10px
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp temp temp" "n n n n" "stat stat stat stat" "fan fan fan fan"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: 0%
icon:
- color: |
[[[
if (states['climate.thermostat_2'].state == 'heat') return 'red';
if (states['climate.thermostat_2'].state == 'cool') return 'blue';
if (states['climate.thermostat_2'].state == 'off') return 'black';
else return 'yellow';
]]]
- width: 100%
- margin-top: 0%
custom_fields:
temp:
- align-self: middle
- justify-self: start
stat:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': |
[[[
if (states["climate.thermostat_2"].attributes["hvac_action"] == "heat") return "lightCoral";
if (states["climate.thermostat_2"].attributes["hvac_action"] == "cool") return "lightSkyBlue";
else return "white";
]]]
fan:
- align-self: middle
- justify-self: start
- '--text-color-sensor': |
[[[
if (states["climate.thermostat_2"].attributes["fan_action"] == "on") return "lightSkyBlue";
else return "white";
]]]
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${states['climate.thermostat_2'].attributes['current_temperature']}°F | </span>
<span>Set: ${states['climate.thermostat_2'].attributes['temperature']}°F</span>`
]]]
stat: |
[[[
return `<ha-icon
icon="hass:fire"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>mode: <span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].state} | </span>
<span><span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['hvac_action']}</span></span>`
]]]
fan: |
[[[
return `<ha-icon
icon="mdi:fan"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>fan: <span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['fan_mode']} | </span>
<span><span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['fan_action']}</span></span>`
]]]
- type: 'custom:button-card'
color_type: blank-card
aspect_ratio: 3/2
- type: 'custom:button-card'
color_type: blank-card
aspect_ratio: 2/2
The horizontal-stack and blank cards are to get it to fit into my UI space nicely. It looks like this:
and unlike the card I was working on before, this one opens the details/history (more-info) window when you tap on it.
The only thing I haven’t done at this point is to have it use different icons based on whether the mode is heat, cool, or off.