Info Card

Who it’s for

Dashboard authors building person profile cards, device overview panels, or SCADA and operator screens ask “how do I show a name, a photo, and a handful of key facts about one entity, without stacking several separate widgets?” They usually have one or two live values — a status, a battery level — that sit next to details that never change, like a department or a serial number.

What it does

A card assigns fullName to Main title and jobTitle to Subtitle, then adds email as an Info item row. Next to it, three static rows — Department: Facility Management, Location: Building A / Floor 3, Employee ID: EMP-2048 — show facts that never come from telemetry. The card renders all of it as one profile, in the order you set.

• Any data key becomes the title, subtitle, image, or a row — assign its Info Card role and the card places it automatically.
• Static rows for facts that never change — department, location, a badge ID — with no data key needed.
• Per-row labels, icons, prefixes, suffixes, and fallback text, so a raw value like 92 can read as “Battery: 92%”.
• Auto-fit, vertical, or horizontal layout, so the same card works as a tall profile panel or a wide status strip.
• Copy-on-hover on any row, for a phone number, an email, or a serial number.
• Shows one entity’s card; it doesn’t compare entities, chart history, or apply color-coded thresholds to a value.

How to set up

Data keys

Add a datasource for one entity — a Device, Asset, Entity view, or Customer, directly or through an alias — then add up to 64 data keys built from telemetry, attributes, or entity fields. Each key’s Info Card role decides what it becomes:

Info Card role	Becomes	When the value is missing
Main title	The card’s title	Uses Fallback title; with no fallback, the title (and the whole header, if the subtitle is also empty) is left out
Subtitle	The card’s subtitle	Uses Fallback subtitle; with no fallback, it is left out of the header
Image URL	The card’s image	Uses Fallback image URL; with neither, the placeholder icon shows instead
Info item row	One row in the list	Shows Empty value placeholder (-- by default), unless Hide this row when value is missing is on

If more than one key shares the same Main title, Subtitle, or Image URL role, the card uses whichever one currently has a value, so a name that sometimes comes from a different source still shows up. For Image URL, the value must look like an image source — a http(s):// URL, a ThingsBoard image path such as /api/images/tenant/..., or a data:image/... URL — anything else is treated as if the key had no value. With no datasource at all, the card still renders its static rows.

Static items

Static items add fixed rows without a datasource — a department, a location, a support contact, a fixed asset ID.

Setting	Default	Effect
Label	Label	Row label text
Value	Value	The fixed text shown in the row

Icon, Prefix, Suffix, Empty value placeholder, and Order work the same way as they do for a dynamic row — see How to customize.

How to customize

Layout

• To force a tall or a wide layout — set Layout mode to Vertical or Horizontal; leave it on Auto-fit content to let the card choose based on its own size.
• To hide a row instead of showing a placeholder — turn on Hide dynamic rows when value is missing for every row, or Hide this row when value is missing on just one data key.

Image

• To hide the image area — turn off Show image.
• To use a fixed circle, square, or rounded square instead of a frame that fills the available space — set Image frame mode, then set Fixed image size.
• To move the image within the card — set Image position (left, center, or right in a vertical card; top, center, or bottom in a horizontal one).
• To change the fallback icon — set Placeholder icon, shown whenever no image loads.

Appearance

• To switch look presets — set Style preset to Dark glass or Light glass.
• To design your own look — set Style preset to Custom, then set Background, Border radius, Border color, and Border width.
• To hide the icons next to each row — turn off Show row icons.
• To turn off the hover-to-copy icon — turn off Copy value on item hover.
• To resize the text — set Title font size, Subtitle font size, and Content font size.
• To adjust the space inside the card — set Card padding.
• To go beyond the built-in settings — set Style preset to Custom and write Advanced: Custom CSS, scoped automatically with the :card selector.

Row content

• To change a row’s icon or label — set Icon and Label override on that data key, or on a static item.
• To reorder rows — set Order on the data keys or static items you want to move; lower numbers come first, and rows without an order keep their original position.
• To format a value — add Prefix or Suffix text; both are shown only when the row has a real value.
• To change the missing-value text — set Empty value placeholder on that key or static item.
• To fill in a title, subtitle, or image before that key reports — set Fallback title, Fallback subtitle, or Fallback image URL on the key with that role.

Tips

• Set decimals and units on the data key itself, not in Prefix or Suffix, so numeric formatting stays consistent with other widgets reading the same key.
• Copy-on-hover copies exactly what the row shows, prefix and suffix included — format the row the way you want it pasted elsewhere.
• Point the datasource at an alias that follows the dashboard’s selected entity, so one card works for whichever device, asset, or customer is currently selected.
• Give every row a unique Order value once you start reordering. Rows sharing a number fall back to their original list order, which can look inconsistent as you add more rows later.