Cards

Class Naming

Cards are layout containers used to group and display content like text, images, and interactive elements. They are styled using the base class Card for standard cards and Card Link for interactive cards.

These classes can be extended using modifiers for different styles, backgrounds, and layouts.

Surface Modifiers

Use these to adapt the card appearance based on the background context.

Naming convention for combo classes is: Card On Surface and Card Link On Surface, where card surface can be Primary, Secondary, Inverse, Accent Primary, Accent Secondary, Accent Tertiary

Example:

• Card Card On Accent Primary
• Card Link Card On Inverse

Card Elements

These modifiers allow additional control over spacing and card behavior across responsive layouts.