No matches.
component
Surface background from the Panel scale (`surface.peak` → `surface.ground`, or `transparent`).
Border color at rest: `none`, `default`, `bold`, `muted`, or `accent`. The 1px line is always reserved when a border can appear, so changing it never shifts layout.
Border color while the surface is `active` — the explicit form of the ring `activeEmphasis` would otherwise pick. It holds through hover, so a `borderInteract` color can't steal it. `inherit` keeps whatever `activeEmphasis` chose; `none` clears it.
Border color on hover and press: `none`, `default`, `bold`, `muted`, or `accent`. Composes with `border`, e.g. a muted line at rest that turns bold on hover.
Surface of the content region. Setting `content.background` switches the card into inset mode: the card becomes a shell (header and footer sit on it, a gutter surrounds everything) and the body renders as one inset panel with its own surface and a concentric radius. `content.padding` (`"none"` for edge-to-edge) also applies in flush mode.
Shorthand for `content.background` — the inset content panel's fill. `content.background` wins when both are set.
Draw hairline separators between the header, content and footer. Only applies in flush mode (an inset card already separates its content) and outside `rhythm` (a 1px rule would knock the card off the raster).
Which surface ramp the panel paints with: `primary` is the filled feedback accent (with contrast text), `secondary` the feedback's own surface tint, `tertiary` the neutral ramp with feedback-accent text. `background` then picks the step on that ramp.
Semantic color tone: `neutral`, `primary`, `success`, `warning`, `danger`, or `inherit`.
Muted state — dims and desaturates the whole card (locked / inactive / unavailable). Purely visual; pair with `aria-disabled`/`inert` for semantics.
Selected state — renders a dashed border. Only visible when the card also has a `border` (e.g. `border="default"`); the dashed style rides the existing ring rather than adding one.
Controls the padding of the header, content, and footer sections (and the corner-overlay inset). Scales from `2xs` (densest) through `xs` / `sm` / `md` (default) to `lg` (most generous).
Frosted glass: the chosen `background` step at /35 with a large backdrop blur, so content behind the panel shows through. A transparent background stays transparent.
Inner padding from the spacing scale.
Corner radius from the radii scale (`full` for fully rounded). `inner` computes a concentric corner from the parent panel's radius minus its padding; `inherit` mirrors the parent's corner exactly, for a child that sits flush with its edge.
Corner radius for the bottom-left and bottom-right corners.
Corner radius for the top-left and bottom-left corners.
Corner radius for the top-right and bottom-right corners.
Corner radius for the top-left and top-right corners.
Keep (or drop) the always-1px transparent border the panel reserves so a border appearing or changing never shifts layout. Computed automatically — it's reserved when a resting `border` is visible, or when `interactive` / `borderInteract` / `active` can change the border at runtime. Set `false` only on a panel that must not occupy that 1px (e.g. a borderless housing frame that would otherwise add 2px around a set).
Opt the surface into the baseline rhythm. The root takes one whole raster line of padding on every edge and its text slots round their leading UP to a whole number of lines, so the box's height comes out as a whole number of lines without anyone setting a height. Inert when off — a surface rendered without it is byte-identical to before. An ancestor scope (a `<Grid rhythm>`, any `[data-rhythm]`) quantises the text without this prop; the prop is what also puts this box on the raster.
Mark this as the chosen one in a set (a current nav item, a checked option, a selected card). Where `interactive` says it *can* be clicked, `active` says it *is* the current choice. Use `activeEmphasis` to control how loud the state is. Combined with `interactive`, hover and press restart their stepping from the active baseline rather than falling back to the unchosen ramp. The four values differ only in what drives the state: `true` by the prop (via `data-panel-active`), `"checked"` by a wrapped native input (`:has(input:checked)` — zero JS, nothing to re-render), `"current"` by an existing `aria-current` on the panel, and `"current-within"` by an `aria-current` on a direct child (a split nav row whose link carries it).
How loud the `active` state is. Defaults to the panel's own `emphasis`, so the chosen state lands on the same ramp as the resting look — this prop is the override for when the active item should be louder (or quieter) than the panel itself. `"primary"` fills with the feedback accent ramp and flips text to the contrast scale (~150 RGB units of separation — the option that reads at a glance in a dense list). `"secondary"` tints the feedback surface ramp and `"tertiary"` the neutral ramp; both promote text to `bold` and lift the border to the default line, but move the surface only ~7–18 units.
Root element tag. Set `"label"` to make the whole card a control.
Enable interactive (hover / focus / press) affordances and states.
Serialize the card's surface config into the rendered HTML so `updateCard()` can change `emphasis`/`feedback`/`background` (and the other surface axes) at runtime. Meant for Astro / vanilla JS, where props don't re-render; reactive frameworks don't need it.
Footer configuration — leading/trailing flank snippets and an optional panel surface.
Header configuration — eyebrow/heading/subheading + leading/trailing snippets and an optional distinct surface, delegated to the inner Banner.
Media region — an image (or custom media snippet via `children`) placed full-bleed at the top/bottom, as a start/end column, or as a background cover behind the content.
Layout hook for the media region — flips the root layout for `start`/ `end` columns and layers siblings for `background`. Set automatically by the high-level Card from `media.placement`; only set it manually when composing primitives.
Column width of a `start`/`end` media placement (any CSS length or percentage). Set automatically by the high-level Card from `media.width`.
Per-slot style and attribute override bag. Each slot accepts `style` (a Panda CSS `SystemStyleObject`) and `props` (extra HTML attributes) merged onto the slot's element.
Plus all standard <div> HTML attributes.