Custom HTML

HTML badge grid

Add a badge grid when a page needs a compact row of labels, tags, or a stack list styled to match the theme.

Snowflake

Postgres

dbt

SOC 2

MCP

Native app

What you can do

A CSS grid of small tiles: display:grid with grid-template-columns and gap lays badges out without any script.
Each badge is plain markup styled inline; colours reference the theme variables (var(--accent), var(--accent-2), var(--ink), var(--muted)) so the grid follows the dashboard theme.
Badges are static labels; for figures that change with the data, use the multi-column tile and {{ }} interpolation.

Applies to an html panel; a kpi or metric-strip is the right block when the numbers, not the labels, are the point.

Spec

View spec

{
  "id": "stack-badges",
  "type": "html",
  "title": "Stack",
  "spec": {
    "html": "<div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;height:100%;box-sizing:border-box;padding:4px;'><div style='border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;text-align:center;'>Snowflake</div><div style='border:1px solid var(--accent-2);color:var(--accent-2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;text-align:center;'>Postgres</div><div style='border:1px solid var(--muted);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;text-align:center;'>dbt</div><div style='border:1px solid var(--muted);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;text-align:center;'>SOC 2</div><div style='border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;text-align:center;'>MCP</div><div style='border:1px solid var(--accent-2);color:var(--accent-2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;text-align:center;'>Native app</div></div>"
  }
}

grid-template-columns: repeat(3, minmax(0, 1fr)) gives three equal columns; every badge colour is a theme variable, so the grid recolours with the dashboard.

Try it live

Open the feature-tour template in the Builder

Open the feature-tour template, page scorecards, panel ft-hero for the custom html tile the variants on these pages grow from.

Build it in dvt

Every block on this page is a few lines of the same declarative JSON spec. Read the full spec format, or connect an AI agent to your warehouse and build one live in the quickstart.

Follow the build

dvt is in founding research. Leave your email and we'll reach out when there's something to see — no newsletters, no noise.