Card tokens are component-local CSS custom properties defined on .bambi-card in card.css. Override them on .bambi-card, a more specific selector, or a scoped wrapper.
--bambi-card-radius : 1 rem ;
--bambi-card-shadow : var ( --bambi-shadow-md );
.billing-panel .bambi-card {
--bambi-card-header-padding : 1.25 rem ;
Token Default Purpose --bambi-card-bgvar(--bambi-card)Root background --bambi-card-fgvar(--bambi-card-foreground)Root foreground --bambi-card-border-colorvar(--bambi-border)Border color --bambi-card-border-width1pxBorder width --bambi-card-radiusvar(--bambi-radius-lg)Root radius --bambi-card-shadownoneRoot shadow
Token Default Purpose --bambi-card-padding-smvar(--bambi-space-3)Small section padding --bambi-card-padding-mdvar(--bambi-space-4)Default section padding --bambi-card-padding-lgvar(--bambi-space-5)Large section padding --bambi-card-header-paddingvar(--bambi-card-padding-md)Header padding --bambi-card-content-paddingvar(--bambi-card-padding-md)Content padding --bambi-card-footer-paddingvar(--bambi-card-padding-md)Footer padding
data-size="sm" and data-size="lg" remap section padding to the small or large values.
Token Default Purpose --bambi-card-transitionbox-shadow 0.15s ease, border-color 0.15s easeHover/focus transition --bambi-card-focus-ring-widthvar(--bambi-state-focus-ring-width)Focus outline width --bambi-card-focus-ring-offsetvar(--bambi-state-focus-ring-offset)Focus outline offset --bambi-card-ringvar(--bambi-state-focus-ring)Focus outline color
Interactive cards use data-interactive; prefer CardLink or real link/button semantics when the whole card is actionable.
Variant Token changes defaultUses default background, border, and no shadow outlineSets background transparent ghostSets background and border transparent elevatedRemoves border color and uses var(--bambi-shadow-md)
