Card

Preview

About

Card surface for the design system — the base for lists, products, featured content, and any block that needs a standardized background, border, and shadow.

• variant: elevated (default, surface background + subtle shadow + thin border), filled (surfaceSecondary background, no shadow — used inside nested sheets/panels), outlined (transparent, border only), ghost (no background, border, or shadow), spotlight (surface + border + component shadow, used in onboarding).
• color / borderColor: override the variant's default background and border.
• borderRadius: custom radius (default KasyRadius.xl).
• padding / margin: inner/outer spacing.
• clipContent: clips content to the card's radius (default true).
• onTap: makes the card pressable, with a depth effect, hover/focus, and semanticLabel.
• focusable: participates in keyboard navigation when onTap is set; disable it if the card already paints its own selection state.
• focusGapColor: color of the focus ring's gap.

Last updated on 08/23/2026