HTML columns with live numbers
Add a multi-column html tile when a cover block needs several live figures laid out your own way.
What you can do
{{ field | agg | format }}works inside html exactly as intext, so each column can print a live figure from thedatarows of the panel.- Lay columns out with
display:gridandgrid-template-columns; the fragment is static markup, so it needs no script to arrange itself. - Colours and the font come from the theme:
var(--accent),var(--accent-2),var(--ink),var(--muted)andtypography.fontFamily. - A snippet that interpolates must carry rows for every field it names; a field the rows do not contain prints a dash placeholder.
Applies to an html panel; when the figures need a change chip or a sparkline, metric-strip gives you both without markup.
Spec
View spec
{
"id": "h1-columns",
"type": "html",
"title": "",
"data": {
"rows": [
{
"month": "Apr",
"revenue": 3120000,
"orders": 1840,
"aov": 1696
},
{
"month": "May",
"revenue": 3380000,
"orders": 1962,
"aov": 1723
},
{
"month": "Jun",
"revenue": 3640000,
"orders": 2071,
"aov": 1758
}
]
},
"spec": {
"html": "<div style='display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;align-items:end;height:100%;box-sizing:border-box;padding:20px 24px;border-radius:16px;border:1px solid var(--muted);'><div><div style='font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);'>Quarter to date</div><div style='font-size:28px;font-weight:800;color:var(--ink);margin-top:4px;'>{{ revenue | sum | currency }} booked</div><div style='font-size:13px;color:var(--muted);margin-top:4px;'>Up {{ revenue | delta | percent }} in the latest month.</div></div><div><div style='font-size:12px;color:var(--muted);'>Orders</div><div style='font-size:24px;font-weight:700;color:var(--accent-2);'>{{ orders | sum | number }}</div></div><div><div style='font-size:12px;color:var(--muted);'>Avg order</div><div style='font-size:24px;font-weight:700;color:var(--accent-2);'>{{ aov | last | currency }}</div></div></div>"
}
}Three columns, four live expressions: sum | currency and delta | percent describe revenue, sum | number counts orders, and last | currency shows the latest average order value.
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.