name and battery percentage status unde icon

[Hadatko]

Is your feature request related to a problem? Please describe. Hi i am using grid panel. In that i want 4 columns. Each column will contains several battery states. I would like to have any text information bellow icon.

Describe the solution you'd like I would like to have any text information bellow icon. I would also like to hide value, as icon is good enough representative.

Additional context Currently it looks terrible and i don't see name as there no space left on a side:

[Hadatko]

This is what i know how to do. As you can see this is one panel contains 4xbatery status cards. If i could hide value and move name under icon it would be top ;)

[hilburn]

You can kind of hide the percentage but it's hideous

state_map:
  - from: "100"
    to: "100"
    display: " "
  - from: "99"
    to: "99"
    display: " "
   ...

obviously this gets very silly very quickly as this feature is designed for exact matches rather than regex or wildcard searches

[Hadatko]

Hopefully some simpler and nicer solution will show up. But thank you for your idea. For example with custom-button-card i can have this:

[hilburn]

You can get them to display vertically rather than horizontally with card-mod:

card_mod:
  style: |
    battery-state-entity {
      flex-direction: column;
    }

I'm not good enough with card-mod to work out how to hide the state using that - iirc it should be something like battery-state-entity$:.state {display: none;} but I wasn't able to make it work

[Hadatko]

Thank you for these hints. I thought that i cannot work with CSS as I will play with this.

[hilburn]

you can with card-mod from HACS

[Hadatko]

I will take a look if i can simplify it by PR to made this with yaml key settings