Big number card severity colours intermittent

Configuration Frontend
1

Hi all,
I cannot get the Big Number card to consistently show severity colors for a battery soc I am trying to display.
I show the template yaml below, along with the yaml for the card.
Changing the card to another battery soc shows the severity colors, but this one

Any ideas would be wonderful as its driving me mad.
Alternatively does anyone know of a vertical gauge with a large number (ideally simple looking as per the big number)

The template sensor is

    - name: "battery state of charge" 
      device_class: energy
      state_class: measurement
      state: "{{(state_attr('sensor.selectronic', 'battery_soc')|int(default=0))}}"
      unit_of_measurement: "%"
      unique_id: sensor.selectronic.soc

the card yaml is

type: custom:bignumber-card
title: House Battery
entity: sensor.battery_state_of_charge
scale: 30px
from: bottom
min: 0
max: 100
severity:
  - value: 20
    bnStyle: var(--label-badge-red)
  - value: 40
    bnStyle: var(--label-badge-yellow)
  - value: 60
    bnStyle: green
2

custom:bar-card ?
It could be vertical, allows setting severities.
And you can use card-mod for playing with fonts.

3

Thanks - I’ll investigate that