HTML Value Card

Who it’s for

Dashboard builders who know exactly how a block should look and have not found a widget that lays it out that way — a summary panel pairing a heading, a big number and a caption beside a product photo, a compact multi-reading badge, a branded tile that has to match a house style. The values are live; the arrangement is yours.

What it does

The HTML Value Card renders markup you write and substitutes live readings into it wherever a ${key label:decimals} placeholder appears. Writing <div class='value'>${My value:2} units.</div> prints the current value of the key labelled My value to two decimals, restyled and repositioned by whatever CSS you supply.

• Any layout you can express in HTML — the default configuration builds a two-column block with a heading, a large value, a description and an inline SVG, which is a starting point rather than a constraint.
• Values are referenced by their data key label, not by index, so renaming a key in the datasource without updating its label leaves the markup working.
• Decimals are written into each placeholder, so one card can print a temperature to one decimal and a counter to none.
• Styling is scoped to the card, so class names here do not collide with the rest of the dashboard.
• Several keys and several entities can feed one block, which makes this the fallback when a reading has to sit inside a layout no card widget offers.
• The HTML Value Card renders text: it draws no chart and animates nothing, and a placeholder whose label matches no data key is left as written, which is what a card showing raw ${...} text is telling you.

How to set up

Data keys

The HTML Value Card takes any number of data keys, and the markup addresses them by label.

Key	Role	Type	Description
My value	Any value referenced from the markup	Timeseries	Addressed by the key’s label, as ${My value:2} where 2 is the decimal places. Attributes work equally well. Add one key per value the markup prints.

Set each key’s label first, then write placeholders that match those labels exactly — the match is on the label text, so a trailing space or a changed capitalization breaks the substitution and the raw placeholder is printed instead.

Content

Setting	Default	Effect
HTML	A two-column block with heading, value, description and an SVG	The markup rendered inside the tile, with ${label:decimals} placeholders resolved live
CSS	Rules for .card, .content, .value and .description	Styles applied to that markup, scoped to this widget

How to customize

• To change the layout — edit the HTML box; the placeholders can sit anywhere in the markup, including inside table cells and attributes.
• To add another reading — add a data key, give it a label, and put ${that label:0} where the value belongs.
• To change a value’s precision — edit the number in its placeholder rather than the widget’s decimals setting, which lets each value in the block carry its own.
• To restyle the block — edit the CSS box, giving the outer element width: 100%; height: 100% so the content tracks the tile.
• To swap the artwork — replace the inline SVG in the markup; a data: URI keeps the card working without an external request.

Tips

• Keep the data key labels short and free of punctuation. The label is retyped inside every placeholder that uses it, and a label like Temp (°C) is easy to mistype into a placeholder that silently renders as literal text.
• Build the block with static text first and add the placeholders once the layout looks right. Debugging CSS and substitution at the same time makes it hard to tell an unstyled block from an unresolved value.