Available modifiers
Adjust orientation
card--horizontal
Adjust action type
card--expandable
Adjust size
card--90
card--200
Adjust width
card--stretched
Adjust styling
card--boxed // Matching background color and border
card--background-neutral // Always matches $color-background-neutral
card--flat
Adjust orientation of media
card--media-portret
card--media-landscape
card--media-square
card--media-wide
card--media-ultra-wide
Adjust shape of icon
card--icon-avatar
Adjust position of metadata
card--right-aligned-metadata
HTML structure
card (modifier)
├── card__expand-status (optional)
├── card__actions
│ ├── card__primary-action
│ │ ├── card__media (optional)
│ │ ├── card__header
│ │ │ ├── card__icon (optional)
│ │ │ ├── card__heading-group
│ │ │ │ ├── card__title
│ │ │ │ │ ├── card__metadata (optional)
│ │ │ │ ├── card__subtitle (optional)
│ │ │ │ ├── card__excerpt (optional)
│ │ │ ├── card__control (optional)
│ │ │ │ ├── other BEM component (e.g. button, input-stepper)
│ ├── card__supplemental-actions (optional)
│ │ ├── card__supplemental-action (optional)
│ │ │ ├── other BEM component (e.g. button, popover)
├── card__details (optional)
│ ├── other BEM components
