HTML Card

The HTML Card widget renders a static HTML block directly on a dashboard, with no datasource required. Use it for fixed-content panels that don’t depend on live data — instructions, legends, contact information, announcements, or decorative layout elements.

• Render any HTML content on a dashboard card with no datasource or data subscription overhead.
• Style with custom CSS scoped to the widget content — write it directly in the CSS field on the Appearance tab.
• Attach ThingsBoard actions to specific HTML elements via On HTML element click — trigger navigation, state updates, or custom handlers from individual clickable zones within the card.
• Works immediately with no configuration beyond the HTML itself.

1. Open the dashboard in edit mode. Click Add widget in the top toolbar, or click the Add new widget icon in the center of an empty dashboard.
2. In the widget bundle selection dialog, find and click Cards.
3. Select the HTML Card widget.
4. Enter the HTML content and click Add.

The widget is configured across four tabs: Appearance, Widget card, Actions, and Layout.

Write the card content in the HTML field. Any valid HTML is accepted — text, headings, tables, images, icons, or SVG. The field is required.

The default template places a centered label inside a flex container:

<div class='card'>HTML code here</div>

Write CSS in the CSS field to style the HTML content. Styles are scoped to the widget and do not affect other widgets on the dashboard. Class names defined in the HTML template are available here.

The default CSS centers and styles the .card element:

.card {
  font-weight: bold;
  font-size: 32px;
  color: #999;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

The HTML Card supports two action sources:

Goal: Add a persistent reference panel to an operations dashboard showing shift contacts and a device-status color legend, so operators always have the information visible without switching tabs.

Step 1. Add the widget. Open your dashboard in edit mode, click Add widget, select Cards, then choose HTML Card.

Step 2. Enter the HTML. In the Appearance tab, replace the default content with:

<div class="ref-panel">
  <section>
    <h4>Shift contacts</h4>
    <table>
      <tr><td>Control room</td><td>ext. 101</td></tr>
      <tr><td>Maintenance</td><td>ext. 204</td></tr>
      <tr><td>Safety officer</td><td>ext. 312</td></tr>
    </table>
  </section>
  <section>
    <h4>Device status legend</h4>
    <ul>
      <li><span class="dot green"></span> Online &amp; reporting</li>
      <li><span class="dot yellow"></span> Online, no data (last 15 min)</li>
      <li><span class="dot red"></span> Offline</li>
    </ul>
  </section>
</div>

Step 3. Add CSS. In the CSS field, paste:

.ref-panel { padding: 16px; font-size: 13px; color: #333; }
.ref-panel section { margin-bottom: 16px; }
.ref-panel h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #666; }
.ref-panel table { width: 100%; border-collapse: collapse; }
.ref-panel td { padding: 4px 8px 4px 0; }
.ref-panel td:last-child { font-weight: 600; }
.ref-panel ul { list-style: none; padding: 0; margin: 0; }
.ref-panel li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.green { background: #4caf50; }
.yellow { background: #ffc107; }
.red { background: #f44336; }

Step 4. Configure the widget card. On the Widget card tab, set Background color to #FFFFFF00 and Padding to 0.

Step 5. Save. Click Add, resize and reposition as needed, then click Save on the dashboard toolbar.

Result: A compact reference panel sits alongside data widgets on the dashboard. The content is always visible with no data connection required.

HTML content is not displayed

CSS styles are not applying

I need live data values in the card

”On HTML element click” action is not triggering