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.

Key Capabilities

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.

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.
In the widget bundle selection dialog, find and click Cards.
Select the HTML Card widget.
Enter the HTML content and click Add.

Configuration

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

Appearance

HTML

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>

CSS

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;
}

Card Title

Setting	Description
Display widget title	Show or hide the widget title bar. Disabled by default — the HTML fills the full card area.
Title	Widget title text shown in the header when the title bar is enabled. Default: `HTML Card`. Configure font and color.
Title tooltip	Optional tooltip shown on title hover.
Display title icon	Show an icon next to the title. Set icon type, size, and color.
Advanced title style	JSON object for custom title CSS (font size, weight, padding, etc.).

Card Style

Setting	Description
Text color	Default text color across the card.
Background color	Card background fill. Set to `#FFFFFF00` (transparent) to let a CSS-defined background show through.
Padding	Inner spacing between card edge and content. Default: `8px`. Set to `0` when the HTML template manages its own padding.
Margin	Outer spacing around the card.
Border radius	Corner rounding in pixels.
Drop shadow	Card elevation shadow. Enabled by default.
Advanced widget style	JSON object for custom CSS applied to the widget container itself (outside the HTML content area).
Widget CSS	Additional CSS injected at the widget scope, separate from the content CSS on the Appearance tab.

Card Buttons

Setting	Description
Enable fullscreen	Adds a fullscreen toggle button to the widget header. Enabled by default.

Actions

The HTML Card supports two action sources:

Source	Description
On HTML element click	Triggers a configured action when the user clicks a specific element inside the card HTML. Assign a CSS class to the target element in the HTML, then reference that class in the action configuration. This lets multiple elements in one card each trigger a different action.
Widget header button	Adds a custom button to the widget header bar that triggers a configured action when clicked.

Layout

Resize Options

Setting	Description
Resizable	Allow the widget to be resized on the dashboard grid. Enabled by default.
Preserve aspect ratio	Maintain the width-to-height ratio when resizing.

Mobile

Setting	Description
Hide widget in mobile mode	Hide the widget when the dashboard renders in mobile layout.
Hide widget in desktop mode	Hide the widget when the dashboard renders in desktop layout.
Order	Position in the mobile layout stacking order.
Height	Fixed height in rows for mobile layout.

Example

Operations Quick-Reference Panel

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.

Troubleshooting

HTML Content Is Not Displayed

Cause	Solution
HTML field is empty	Open widget configuration → Appearance and enter HTML in the HTML field.
Malformed HTML	Validate the HTML — missing closing tags or unclosed attributes can prevent rendering. Use the Tidy button in the editor to auto-format and catch obvious issues.

CSS Styles Are Not Applying

Cause	Solution
Class name mismatch	Verify the class names in the CSS exactly match those in the HTML template.
Styles overridden by widget defaults	Use more specific CSS selectors, or add `!important` as a last resort.
Wrong CSS field	The CSS field on the Appearance tab styles the HTML content. The Widget CSS field under Widget card → Advanced widget style applies to the widget container. Make sure you are editing the right one.

I Need Live Data Values in the Card

Cause	Solution
Wrong widget selected	The HTML Card is for static content only. Use the HTML Value Card to insert `${key}` placeholders, or the Markdown/HTML Card for Markdown and JavaScript-based dynamic content.

“On HTML Element Click” Action Is Not Triggering

Cause	Solution
CSS class not assigned to the element	Add the CSS class referenced in the action configuration to the target HTML element: `<button class="my-action-btn">Click</button>`.
Action not configured	Open widget configuration → Actions and add an action with source On HTML element click, referencing the correct element class.

Was this helpful?