Layout and media

Divider

Add a divider panel when two groups of panels need a visual break that carries no text.

What you can do

  • orientation is horizontal or vertical; thickness (default 1) is in pixels and inset (default 0) shortens the rule by that many pixels from both ends.
  • style is solid, dashed, or dotted; color accepts a theme token such as {chart.series.1} or any CSS colour.
  • A divider has no text and no data; pair it with section when the break needs a label.

Applies to a divider panel; section with rule: true draws a labelled rule instead.

Spec

View spec
{
  "id": "rule-1",
  "type": "divider",
  "title": "",
  "spec": {
    "orientation": "horizontal",
    "thickness": 2,
    "color": "{chart.series.1}",
    "style": "dashed",
    "inset": 8
  }
}

A two-pixel dashed rule in the first series colour, stopping eight pixels short of each end.

Try it live

Open the revenue-overview template in the Builder

Open the revenue-overview template: rev-rule is a solid two-pixel divider coloured with the dashboard primitive {color.gold}.

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.

No spam. We use this to reach out directly, nothing else.