Display blocks · Components

Display blocks carry the summaries and notices around a page's data: a group of headline figures, label / value facts, a grid of cards linking elsewhere, an empty state, a banner and a read-only code snippet. Each one is a leaf block that reads its content from its options or from a route, and writes its texts in the reader's language (Block fundamentals).

Screenshot of the Stat group block — Stat group`StatGroup`

The blocks

Stat group

Several figures or states at a glance.

Key / value list

Label and value rows, each value drawn by its type.

Navigation cards

Cards linking to other pages, with their live state.

Empty state

Why there is nothing here, and what to do next.

Banner

A notice with a tone, actions and a remembered dismiss.

Code block

Read-only code with highlighting and a copy button.

All of them import from the base barrel or their own subpath:

src/pages/overview.ts

import {
  Banner,
  CodeBlock,
  EmptyState,
  KeyValueList,
  NavCardGrid,
  StatGroup,
} from "@antelopejs/interface-dms/base";

Next steps

Card

Frame display blocks under one head.

Composed texts

Send values, not sentences.