Kicker

Hero example

When to use

Kicker is the small uppercase mono caption that introduces a card — "OPTION GRANT — DRAFT", "BOARD CONSENT", "ANNUAL FILING", "PLAN — IN PROGRESS". Tighter than Eyebrow and fixed to mono.

For section labels inside a card body (under the header), use Section.label or Eyebrow.

Anatomy

A <span> with mono font, 11px, 0.08em letter-spacing, uppercase. Three tone variants: default (--text-secondary), muted (--text-tertiary), accent (--accent-default).

Props

In Dynamic Cards

This primitive's type is "Kicker". The canonical card header is Kicker → Heading → Subtitle, wrapped in a Stack with gap: "xs":

{
  "type": "Stack",
  "gap": "xs",
  "children": [
    { "type": "Kicker", "text": "OPTION GRANT — DRAFT" },
    { "type": "Heading", "text": "Aaron Khan — ISO" },
    { "type": "Subtitle", "text": "2024 EIP · 4-yr vest · 1-yr cliff" }
  ]
}

Source