HTML Card

Who it’s for

Dashboard builders who need a piece of the board that no widget covers — a block of instructions for the shift crew, a legend explaining what the colors mean, a link panel to the runbook, a formatted note above a chart. The requirement is layout control rather than data: the content is known in advance and does not change with the telemetry.

What it does

The HTML Card renders markup you write, styled by CSS you write, and nothing else. Entering <div class='card'>Shift handover at 14:00</div> with a matching .card rule produces exactly that block, centered and styled as specified, with no data binding of any kind.

• Full markup control — headings, lists, tables, links and images render as ordinary HTML inside the tile.
• Styling is scoped to the card — the CSS box sits with the widget, so a class name used here does not collide with the rest of the dashboard.
• The card is static by design, which means it never waits on a subscription, never shows a loading state and never goes stale.
• Content is fixed at configuration time: the HTML Card interpolates no values, so a block that has to show a reading belongs on the HTML Value Card instead.

How to set up

Data keys

The HTML Card takes no datasource and no data keys — it is a static widget. The default configuration carries a leftover demo datasource, which can be removed without affecting what renders.

Content

Setting	Default	Effect
HTML	<div class='card'>HTML code here</div>	The markup rendered inside the tile
CSS	A .card rule centering bold 32 px gray text	Styles applied to that markup, scoped to this widget

How to customize

• To change what the card says — edit the HTML box; anything valid inside a div renders, including lists, tables and links.
• To restyle it — edit the CSS box. Give the outer element width: 100%; height: 100% so the content tracks the tile as the dashboard is resized.
• To center content vertically — use flexbox in the CSS box, as the default rule does with display: flex; align-items: center.
• To include a picture without an external request — embed it as a data: URI in the markup, which keeps the card working on air-gapped installations.

Tips

• Write the outer element to fill the tile rather than to a fixed pixel size. A card built at fixed dimensions looks right at the size it was authored and wrong at every other breakpoint, and dashboards are routinely opened on phones.
• Keep class names specific, like .handover-note rather than .card. Several HTML cards on one dashboard each carry their own CSS, and generic names make the boxes hard to tell apart when the dashboard is edited months later.