Card mod and the Entity card

Configuration Frontend
1

I really struggle with card_mod. When i google stuff it comes up with all sorts of weird syntax and i just don’t get it.

Anyway, I have an Entity card displaying in the bottom right of a particular dashboard view (pictured). I would like to change the colour and size of the icon. Googling hasn’t revealed the answer!

The code currently is

type: entity
card_mod:
  style: |
    ha-card {
      text-align: center;
     }
     .info .value {
       font-size: 60px;
     }
     .header .name {
        font-size: 20px;
     }
entity: sensor.hot_tub_heater_next_due_in
name: Heater next due  on in (hh:mm)
icon: mdi:radiator
state_color: false

The whole screen is in the picture.

Screenshot 2025-11-29 012546
Screenshot 2025-11-29 0125461161×554 47.8 KB

2

You can use CSS vars in ha-card{ }. You may also wish to add align-items: center to .header if you wish the header text to be aligned center vertically if you are increasing the size of the icon.

type: entity
card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 48px;
      --state-icon-color: red;
      text-align: center;
     }
     .header {
       align-items: center;
     }
     .info .value {
       font-size: 30px;
     }
     .header .name {
        font-size: 20px;
     }
entity: sensor.sun_next_dawn
name: Heater next due  on in (hh:mm)
icon: mdi:radiator
state_color: false
3

Thanks, that worked.

I tried the align-items: center; thing but that didn’t do anything! But I’m happy with the way it looks now.

1 Like