Card

Card — контейнер-поверхность для сгруппированного содержимого: панелей настроек, блоков дашборда и встроенных сводок.

Обзор

Стилизация Card сосредоточена в одной сгруппированной поверхности: рамка зависит от оформления, внутренние отступы — от размера.

Публичные CSS-переменные

Weekly report

Sent every Monday at 9:00 to 4 people.

Переменная	Значение	Влияет на
Цвет рамки.`Card`		В этом состоянии изменений не видно
Фон поверхности.`Card`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Card: владеет всей поверхностью, внутренними отступами и скруглением.

Взаимодействие состояний и вариантов

size меняет внутренние отступы и скругление.
appearance='outline' показывает рамку.
appearance='transparent' убирает акцент рамки на уровне карточки.

Примеры

.brandCard {
  --card-border-color: var(--border-color);
}

.linkCard:hover {
  --card-background-color: var(--fills-tertiary);
}

.softCard {
  --card-background-color: var(--surface-primary);
}

Не переопределяйте

Не полагайтесь на прозрачные карточки там, где фон родителя визуально шумный.
Не используйте стилизацию карточки вместо семантической структуры заголовков.
Не ожидайте, что поверхность автоматически решит вопрос внутренних отступов.