Lovelace: BigNumber card


BigNumber card

With various people requesting larger numbers for sensors we got to here. The card supports showing one big number but also severity colors with bar.


You can find the code here


The instructions are also found on the above repo.

  1. Download bignumber-card.js
  2. Place the file in your config/www folder
  3. Include the card code in your ui-lovelace.yaml
  - url: /local/bignumber-card.js?v=1
    type: js

Note: You can change v=1 to a higher number whenever updating code to avoid having to clear cache in all browsers

  1. Write configuration for the card in your ui-lovelace.yaml
- type: custom:bignumber-card
  title: Humidity
  entity: sensor.outside_humidity
  scale: 30px
  from: bottom
  min: 0
  max: 100
    - value: 70
      style: 'var(--label-badge-green)'
    - value: 90
      style: 'var(--label-badge-yellow)'
    - value: 100
      style: 'var(--label-badge-red)'
  1. Reload your Lovelace tab (no need to restart Home Assistant or other things) and you should see the card.



Name Type Default Description
type string Required custom:bignumber-card
title string optional Name to display on card
scale string 50px Base scale for card: ‘50px’
entity string Required sensor.my_temperature
min number optional Minimum value. If specified you get bar display
max number optional Maximum value. Must be specified if you added min
from string left Direction from where the bar will start filling (must have min/max specified)
severity list optional A list of severity objects. Items in list must be ascending based on ‘value’

Severity object

Name Type Default Description
value number Required Value until which to use this severity
style number Required Color of severity. Can be either hex or HA variable. Example: ‘var(–label-badge-green)’


  • Make sure you use ascending object values to have consistent behaviour
  • Values are the upper limit until which that severity is applied


Looks good! I have to say I’m impressed with the rate of progress you guys are making!


This is awesome. With the power of Lovelace, I’m worried the community will make awesome cards like this and they’ll get lost in the shuffle. There should be a Lovelace card App Store or even a forum topic here to help organize where users can find custom (non-official) cards.


This also makes me want custom-tiles-ui ported to a Lovelace card.


Very Good. I’ll try it