Cards

‹ Widgets Library

Cards widgets are widgets that display key metrics, states, or entity attributes in a compact and visually appealing format. They are commonly used to build KPI or status overview dashboards, where each card presents concise but essential information — such as a current value, device state, status indicator, or aggregated summary.

• 
  Value card

  Displays a single entity attribute or the latest telemetry in a visually appealing rectangle card.

• 

  Horizontal value card

  Displays a single entity attribute or the latest telemetry using a horizontal layout.

• 

  Value and chart card

  Displays a single entity telemetry as a combination of the latest and aggregated telemetry values. Optionally may display the corresponding historical values as a simplified chart.

• 

  Simple Value and chart card

  Displays a single entity historical telemetry values as a simplified chart. Optionally may display the latest telemetry value.

• 

  Label card

  Displays a single value with optional icon.

• 

  Label & value card

  Displays a single entity attribute or the latest telemetry and icon.

• 

  Progress bar

  Displays entity value reading as a horizontal progress bar. Allows to set the location, range, and other settings.

• 

  Label widget

  Displays the latest telemetry values as an overlay on image. The position of the values is configurable using appearance settings.

• 

  Dashboard state widget

  Displays specified dashboard state widget. Advanced widget settings allows you to configure target dashboard entity and state to be displayed.

• 

  QR Code

  Displays the QR code. The code is calculated using a configured pattern or function based on the values of the latest telemetry data.

• 

  Mobile app QR code

  Enables users to open the ThingsBoard mobile app by scanning the QR code from dashboard.

• 

  Attributes card

  Displays one or more attributes or the latest telemetry values of the selected entity. Supports multiple attributes as separate rows.

• 

  HTML Card

  Useful to inject custom HTML code. Designed to display static information only.

• 
  HTML Value Card

  Displays configurable HTML with the ability to inject values from the selected data source, for example, display single or multiple attribute values.

• 
  Markdown/HTML Card

  Renders markdown/HTML using the configured pattern or function with applied attributes or time series values.

• 

  Unread notifications

  Displays the number of unread notifications for the current user.