Info Card

Info Card

Info Card displays a compact entity profile or status card using the latest values from ThingsBoard data keys. It can show a dynamic title, subtitle, image, and information rows from telemetry, attributes, or entity fields, plus optional static rows configured directly in the widget settings.

Use it for person cards, device overview cards, asset information panels, smart building dashboards, SCADA screens, and operator UI panels.

Features

• Dynamic title, subtitle, image URL, and info rows from datasource data keys.
• Static rows for fixed text such as department, location, support contact, or asset ID.
• Data-key-specific configuration for labels, icons, order, prefixes, suffixes, fallback values, and empty-value handling.
• Auto-fit, vertical, and horizontal layouts.
• Auto-fit image frame with responsive placeholder icon.
• Dark glass, light glass, and custom appearance presets.
• Optional row icons.
• Optional copy-on-hover action for row values.
• Scoped custom CSS using the :card root selector.

Widget type

This widget is a Latest values widget. It reads the most recent value of each configured data key and updates when ThingsBoard pushes new values.

Data keys

Add one datasource and then add the data keys you want to display. Each data key can be telemetry, an attribute, or an entity field supported by ThingsBoard Latest values widgets.

The widget uses the Info Card role setting of each data key to decide how that key is used.

Only the first data key assigned to Main title, Subtitle, or Image URL is used for that role. All keys assigned to Info item row are rendered as rows.

Recommended data key examples

For a person profile card:

For a device or asset card:

Data key settings

Each data key has its own Info Card settings.

Common setting

Main title settings

Visible when Info Card role = Main title.

Subtitle settings

Visible when Info Card role = Subtitle.

Image URL settings

Visible when Info Card role = Image URL.

Info item row settings

Visible when Info Card role = Info item row.

Widget settings

Layout

Appearance

Font weights are optimized for readability: title uses 700, row labels use 700, and row values use 500.

Image

Auto-fit frame uses the available image area and keeps the text area usable. The placeholder icon scales with the image frame size.

Static items

Static items are configured in the widget settings and do not require datasource data keys.

Value handling

• Dynamic rows use the latest value from each configured data key.
• Numeric values respect the ThingsBoard data key decimals and units configuration when available.
• Prefix and suffix are applied only when a real value exists.
• Missing values show the configured empty-value placeholder, unless the row is hidden.
• Copy-on-hover copies the displayed row value, including prefix and suffix.

Value ranges

This widget does not apply built-in semantic ranges, thresholds, or color-coded value bands. All incoming values are displayed as text. Use data key labels, prefixes, suffixes, ThingsBoard decimals/units, or custom CSS to adapt the presentation.

For configuration values, use these ranges:

Example configuration

1. Add the widget to a dashboard.
2. Select a single entity datasource, for example a Device, Asset, or Entity alias.
3. Add data keys such as fullName, jobTitle, photoUrl, email, phone, and location.
4. Open each data key settings panel and assign an Info Card role.
5. For info rows, set icon, label override, order, prefix, suffix, and empty-value behavior.
6. Use static items for fixed values that should not come from telemetry or attributes.
7. Adjust layout, image mode, and appearance in the widget settings.

Custom CSS

When Style preset = Custom, use :card as the scoped root selector.

:card {
  backdrop-filter: blur(14px);
}

:card .tb-info-card-title {
  text-transform: uppercase;
}

:card .tb-info-card-item-value {
  letter-spacing: 0.01em;
}

Troubleshooting

• If the image does not appear, check that the Image URL data key contains a browser-accessible URL or a valid data URL.
• If the title or subtitle is empty, check that a data key has the correct role and that the key has a latest value or fallback text.
• If a row is missing, check Hide dynamic rows when value is missing and the per-key Hide this row when value is missing option.
• If rows appear in the wrong order, adjust the Order value in data key settings or static item settings.
• If icons do not render, verify that the icon names are valid Material icon names.