Value card

Who it’s for

Dashboard builders putting together the first screen a tenant sees — the one that answers “what is this sensor reading right now?” before anyone drills into a chart. The reader wants one number, large enough to catch from across a room, with enough context to know what it measures and whether it is fresh.

What it does

The Value card renders one live reading as a large number with a label, an icon and the time it last arrived. A device reports temperature = 23: the card prints 23 °C at 52 px, labels it Temperature, shows a thermostat icon in indigo, and prints last update ago underneath so a stale reading is visible as stale.

• Six layouts from one setting — square, vertical, centered, simplified, horizontal and horizontal reversed rearrange the same four elements without touching anything else.
• Text scales to the tile — with auto scale on, the number stays proportional whether the card sits in two grid columns or eight, so one configuration survives being resized.
• Freshness is part of the reading — the date line can show last update ago or an absolute timestamp, which distinguishes a device holding steady from a device that stopped reporting.
• Label, icon, value and date each take their own font and color, and the colors accept ranges or a gradient so the card can shift with the value.
• Units are converted, not just appended — the card respects the unit set on the key and converts to the unit chosen on the widget.
• A key that has never reported prints N/A rather than a blank tile.
• The Value card shows one key for one entity: for several readings side by side use the Attributes card, and for history use a chart.

How to set up

Data keys

The Value card takes one datasource, one entity and one data key.

Key	Role	Type	Description
temperature	The number printed on the card	Timeseries	Any numeric or text reading. An attribute works equally well. The key’s own units and decimals override the widget-level ones, so a shared card can host keys of different precision.

The widget ships with a demo f(x) generator instead of a real datasource — replace it with the entity and key you want. Until the key reports, the card prints N/A.

How to customize

• To rearrange the card — pick a Layout: Square, Vertical, Centered, Simplified, Horizontal or Horizontal reversed.
• To keep text proportional at any tile size — leave Auto scale on; turn it off to pin exact font sizes.
• To rename what the number measures — turn on Label and set its text, font and color. The label defaults to the data key’s own label.
• To change or drop the icon — set Icon to any Material or MDI name, adjust its size, or turn it off for a bare number.
• To make the number react to its own value — set Value color to a range or a gradient instead of a constant, so a reading crossing a threshold recolors itself.
• To show an exact timestamp instead of a relative one — turn off last update ago under Date and choose a date format, or hide the date entirely.
• To display in a different unit — set the widget’s Units; the card converts the incoming value rather than relabeling it. Decimals controls the printed precision.

Tips

• Set the icon and the value color from the same range so the card carries its state twice. A reader scanning a wall of cards picks up the color long before the number, and the icon keeps that signal readable for anyone who cannot rely on color alone.
• Prefer last update ago over an absolute timestamp on cards that watch battery or cellular devices. A card reading 21 °C · 3 days ago is obviously wrong at a glance, while the same card showing a formatted date looks fine until someone works out what day it is.