Horizontal value card

Who it’s for

Dashboard builders who need a readings strip rather than a grid of tiles — a header band across the top of a screen, or a row per asset down the side, where each line carries one number and vertical space is scarce. The question is the same as for any value tile (“what is it reading now?”), but the answer has to fit in a single grid row.

What it does

The Horizontal value card lays one live reading out along a 5×1 strip: icon, label and value on one line, with the time of the last update beside them. A device reports temperature = 23 and the strip reads Temperature 23 °C with a thermostat icon and last update ago, all at a height that stacks cleanly with other strips.

• Built for a one-row footprint — the default 36 px value and horizontal arrangement are sized so a column of these lines up without any tuning.
• The same six layouts as the square card are still available, so a strip can be switched to Horizontal reversed to put the value first and the icon last.
• Text scales to the strip — auto scale keeps the number proportional as the widget is stretched across a wide dashboard.
• Freshness sits inline — the date line shows last update ago by default, so a stale strip is visible without leaving the row.
• Label, icon, value and date each take their own font and color, and colors accept ranges or a gradient.
• 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 Horizontal value card carries one key for one entity — several keys per entity belong on the Attributes card.

How to set up

Data keys

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

Key	Role	Type	Description
temperature	The number printed on the strip	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 strip prints N/A.

How to customize

• To put the value before the icon — set Layout to Horizontal reversed; the other four layouts are available too if the strip is later resized into a block.
• To keep text proportional as the strip stretches — 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.
• To change or drop the icon — set Icon to any Material or MDI name, adjust its size, or turn it off to recover width for a longer label.
• To make the number react to its own value — set Value color to a range or a gradient instead of a constant.
• 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 to free up room.
• To display in a different unit — set the widget’s Units; the card converts the incoming value. Decimals controls the printed precision.

Tips

• Give every strip in a stack the same icon size and label font, and let only the value color vary. Rows read as a table that way, and the eye tracks down the value column instead of re-reading each line.
• Hide the date on strips fed by a fast-reporting source and keep it on the slow ones. On a dashboard mixing a wired PLC with a battery sensor, the date then appears exactly where staleness is actually possible.