Banner

Panel surface fill. Only meaningful when `tone="neutral"`.

Panel border ring strength. Only meaningful when `tone="neutral"`.

Panel emphasis variant. Under `"primary"`, panel-aware text colors flip to their contrast variant.

Text style token applied to the eyebrow slot (e.g. `"eyebrow"`, `"label.sm"`). Overrides the `size`-derived typography for the eyebrow; `passThrough.eyebrow.style` still layers on top.

Text style token applied to the heading slot (e.g. `"numeric.md"`, `"heading.lg"`). Overrides the `size`-derived typography for the heading (including `headingWeight`); only `passThrough.heading.style` layers on top.

Heading font weight. `"normal"` renders the heading as plain body text.

Panel radius token.

Panel radius token applied to the bottom corners only.

Panel radius token applied to the left corners only.

Panel radius token applied to the right corners only.

Panel radius token applied to the top corners only.

Panel drop-shadow token.

Controls the heading font size. Padding and radius come from Panel and can be set independently.

Text style token applied to the subheading slot (e.g. `"body.sm"`, `"caption"`). Overrides the `size`-derived typography for the subheading; `passThrough.subheading.style` still layers on top.

Semantic surface color inherited from Panel. When set to anything other than `neutral`, banner owns its background via the tone palette.

Frosted-glass backdrop blur. Only meaningful when `tone="neutral"`.

Render the banner as a sized control row — a navigation item, a list or menu row — on the Control Var Contract, like a Button or an Input of the same size: `data-control-size` is baked on the root, the row takes the control height and padding, and the `leading` / `trailing` Affixes flip that padding per side. The text rows stop setting their own type: the heading inherits the row's font and colour, and while it is the only text row it lays out as a direct child of the row. Leave it unset for a block banner (a card or section header).

All layout configuration, keyed per slot (mirrors `passThrough`). Each slot owns its own object: - `root: { align }` — cross-axis alignment of the root flex (leading ↔ text block ↔ trailing). Default `"stretch"`. - `content: { align }` — horizontal alignment of the whole text block. Default `"start"`. - `leading: { align, span }` — leading element's cross-axis self-alignment (overrides `root.align`) and flank `span` (`"all"` | `"above"` | `"below"`, default `"all"`). - `trailing: { align, justify }` — trailing element's cross-axis self-alignment (overrides `root.align`) and horizontal `justify` of its own content (`"end"` flushes constrained content to the right edge; default `"center"`). - `eyebrow` / `heading` / `subheading: { align, trailing, lines, gap }` — per-row cross-axis `align` (default `"firstLine"`: addons sit on the row's first line), trailing-element placement (`"apart"` at the right edge or `"together"` next to the text, default `"apart"`), `lines` (the row's leading in whole raster lines) and `gap` (whole raster lines of space above the row; ignored on the eyebrow). `lines` and `gap` are the rhythm knobs: both are inert outside a `[data-rhythm]` scope, so a banner that never opts in renders identically whatever they are set to.

Panel padding token. Defaults to none so banner reads flat inside cards/dialogs.

Opt the banner into the baseline rhythm: `data-rhythm` is baked on the root and the eyebrow / heading / subheading quantise their leading to the line. An ancestor scope (a `<Grid rhythm>`, a `<Card rhythm>`, any `[data-rhythm]`) quantises the text without this prop — which is how a banner inside a card header stays on the baseline without taking a second padded box. The padded box is surface-aware. A banner with a visible surface (a non-transparent `background`, a `border` or a `shadow`) is forwarded to Panel, which pads it one whole line per edge. The default transparent, borderless banner takes the scope only: its padding would be invisible space pushing the text off the column edge the grid gave it. Inside any rhythm scope, with or without this prop, every row defaults to one line of leading at `xs`–`md` (the `lg` heading keeps the round-up), so the kicker, title and subtitle read as one block. `layout.*.lines` still wins, and a row whose `*TextStyle` is overridden keeps the round-up. With this prop, the leading element also flanks the heading + subheading pair (`layout.leading.span` defaults to `"below"`, eyebrow full width above).

Document outline level of the heading row — picks the rendered tag (`1` → `<h1>` … `6` → `<h6>`). Purely semantic: typography still comes from `size` / `headingWeight` / `headingTextStyle`, so raising a banner to the page's `<h1>` never changes how it looks. Set it whenever the banner is a real section or page heading rather than a card title. `"none"` renders the heading row as a non-heading `<span>` with the same typography — for a banner that titles a row rather than a section (a list row, a menu entry), so it adds no entry to the document outline.

The banner body content, rendered in the content column.

The eyebrow kicker line above the heading. Accepts a string/snippet or a `{ leading, content, trailing }` object.

The heading line. Accepts a string/snippet or a `{ leading, content, trailing }` object.

The leading element flanking the text block (e.g. an icon or Stamp).

The subheading line below the heading. Accepts a string/snippet or a `{ leading, content, trailing }` object.

The trailing element of the banner.

Bindable reference to the banner's root element.

Per-slot style/attribute override bag. Each slot accepts a `style` (Panda style object) merged into its base styles and a `props` bag of extra HTML attributes.