Label & value card

Who it’s for

Dashboard builders who want a value tile to say what it means in their own words rather than in the data key’s. The label on this card is text you type, so a key called t1 can appear as Cold room — return air, and a whole board can be captioned for operators who never see the underlying key names.

What it does

The Label & value card puts a fixed caption, an icon and one live reading on a single 4.5×1 row. A device reports t1 = 4: the card shows the icon, the caption you typed, and 4 °C beside it, with the caption staying put no matter what the key is renamed to upstream.

• The caption is yours — typed into the widget rather than inherited from the data key, so the wording survives key renames and stays readable to people who do not know the naming scheme.
• Everything scales together — auto scale keeps caption, icon and value in proportion as the row is resized.
• Caption, icon and value each take their own font and color, and the colors accept ranges or a gradient so the tile can shift with the reading.
• The whole card is clickable — attach a card-click action to open a state, a dashboard or a details dialog, which turns a row of these into a navigation menu that also shows live values.
• 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, and the Label & value card carries exactly one reading: no date line, no second key, no history.

How to set up

Data keys

The Label & value card takes one datasource, one entity and one data key.

Key	Role	Type	Description
temperature	The number printed beside the caption	Timeseries	Any numeric or text reading. An attribute works equally well. The key’s own units and decimals override the widget-level ones.

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. The caption is independent of the key: it stays exactly as typed even when no data arrives.

How to customize

• To write the caption — turn on Label and type the text, then set its font and color.
• To keep everything proportional as the row is resized — leave Auto scale on; turn it off to pin exact font sizes.
• To change or drop the icon — set Icon to any Material or MDI name, adjust its size and color, or turn it off for a caption-and-value pair.
• To make the number react to its own value — set Value color to a range or a gradient instead of a constant.
• To tint the icon with the reading rather than the caption — set Icon color to a range; caption and value keep their own colors.
• To display in a different unit — set the widget’s Units; the card converts the incoming value. Decimals controls the printed precision.

Tips

• Attach a card-click action and use a column of these as a live index. Each row names an asset in plain language, shows its headline number, and opens that asset’s state when clicked — one widget covering both navigation and status.
• Keep the caption short enough that auto scale does not have to shrink it. Once the caption wraps, the value loses height on every row in the stack, not just the one with the long text.