About this element
A bordered, padded container for grouping related content. Picks up border-radius and spacing from context variables, so it adapts to any design token configuration.
A card that is a button, link, or label takes the global hover modifier for a pointer cursor and a hover tint. bg-transparent drops the surface and border so only the padding remains.
A card announces its color as --surface, so elements inside that need to blend with it read it by inheritance.
Relevant global modifiers
sm / md / lg Scale spacing and font sizebg-transparent No background or borderhover Pointer cursor and a hover tint