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 modifiers (combo classes) to adapt the card appearance based on the background context.
Naming convention:
card on-Surface
and card-link on-Surface
, where card surface can be primary
, secondary
, inverse
, accent-primary
, accent-secondary
, accent-tertiary
Example:
- card on-accent-primary
- card-link on-inverse
Card Elements
These modifiers allow additional control over spacing and card behavior across responsive layouts.