Narrative

Hero

Add a hero panel when a canvas page needs a large opener whose headline can restate a live figure.

Revenue review

The half we booked: $2.3M

Completed-order revenue for H1 FY26, and where it came from.

What you can do

headline is required; eyebrow sits above it and subhead below, and all three interpolate {{ field | agg | format }} from the data rows of the panel.
size is sm, md, lg (default), or xl, scaling the headline from 32 to 80 design pixels; the text auto-fits its panel.
align is left, center, or right.
A hero carries no chart and accepts no onClick; use it as a page or section opener on a canvas page, and section for a lighter heading with a rule.

Applies to a hero panel; section is the compact heading with an optional rule, text is for paragraphs, and html is for a fully custom cover tile.

Spec

View spec

{
  "id": "h1-cover",
  "type": "hero",
  "title": "",
  "data": {
    "rows": [
      {
        "half": "H1 FY26",
        "revenue": 2340000
      }
    ]
  },
  "spec": {
    "eyebrow": "Revenue review",
    "headline": "The half we booked: {{ revenue | last | currency }}",
    "subhead": "Completed-order revenue for {{ half | first }}, and where it came from.",
    "align": "left",
    "size": "xl"
  }
}

size: "xl" is the largest headline; the two {{ }} expressions pull the figure and the period label from the single data row, so the hero restates itself when the data changes.

Try it live

Open the revenue-overview template in the Builder

Open the revenue-overview template: rev-hero is an xl opener with eyebrow and subhead, and rev-s2-label is an md hero used as a section label.

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.