Home

Awesome

Big number card

A simple card to display big numbers for sensors. It also supports severity levels as background.

bignumber

Options

NameTypeDefaultDescription
typestringRequiredcustom:bignumber-card
titlestringoptionalName to display on card
scalestring50pxBase scale for card: '50px'
entitystringRequiredsensor.my_temperature
attributestringoptionalthe entity attribute you want to display e.g. current_temperature. The entity state will be shown if not defined.
minnumberoptionalMinimum value. If specified you get bar display
maxnumberoptionalMaximum value. Must be specified if you added min
colorstringvar(--primary-text-color)Default font color. Can be either hex or HA variable. Example: 'var(--secondary-text-color)'
bnStylestringvar(--label-badge-blue)Default bar color. Can be either hex or HA variable. Example: 'var(--label-badge-green)'
fromstringleftDirection from where the bar will start filling (must have min/max specified)
severitylistoptionalA list of severity objects. Items in list must be ascending based on 'value'
hideunitbooleanoptionalhide the unit of measurement if set to true. If absent, unit of measurement will be shown
noneStringstringoptionalString to use for value if value == None
noneCardClassstringoptionalCSS class to add to card if value == None
noneValueClassstringoptionalCSS class to add to value if value == None
roundintoptionalNumber of decimals to round to. (If not present, do not round.)

Severity object

NameTypeDefaultDescription
valuenumberRequiredValue until which to use this severity
bnStylestringRequiredColor of severity. Can be either hex or HA variable. Example: 'var(--label-badge-green)'
colorstringvar(--primary-text-color)Font color of the severity. Can be either hex or HA variable. Example: 'var(--secondary-text-color)'

WARNINGS

Example

- type: custom:bignumber-card
  title: Humidity
  entity: sensor.outside_humidity
  scale: 30px
  from: bottom
  min: 0
  max: 100
  hideunit: true
  color: '#000000'
  bnStyle: 'var(--label-badge-blue)'
  severity:
    - value: 70
      bnStyle: 'var(--label-badge-green)'
    - value: 90
      bnStyle: 'var(--label-badge-yellow)'
    - value: 100
      bnStyle: 'var(--label-badge-red)'
      color: '#FFFFFF'

Handling None values

If your sensor may result in None (for instance if it is offline), you may wish to handle that separately. Here is an example, which uses card-mod to add special styling for the None case.

- type: custom:bignumber-card
  title: Humidity
  entity: sensor.outside_humidity
  scale: 30px
  from: bottom
  min: 0
  max: 100
  color: '#000000'
  bnStyle: 'var(--label-badge-blue)' 
  severity:
    - value: 70
      bnStyle: 'var(--label-badge-green)'
    - value: 90
      bnStyle: 'var(--label-badge-yellow)'
    - value: 100
      bnStyle: 'var(--label-badge-red)'
      color: '#FFFFFF'
  noneString: Offline
  noneCardClass: none-card-class
  noneValueClass: none-value-class
  style: |
    .none-card-class {
      background-color: yellow;
    }
    .none-value-class {
      font-size: 22px !important;
    }