Карточки

Карточки - важнейший элемент дизайн-системы. По сути они содержат в себе весь контент, расположенный в веб-приложениях.

Критерии использования

Для начала работы с карточками важно понять несколько простых критериев использования

Карточка в классическом виде может быть только одна
Нельзя располагать карточку в карточке. Это усложнит восприятие интерфейса и сделает его "грязным"
Внутри карточки может располагаться любой контент, кроме самой карточки и баннера
Необходимо управлять внутренними отступами карточки. Так, если основным экраном вашего приложения является таблица, необходимо обнулить внутренние отступы таблицы (класс p-card--no-padding). Если же вы проектируете форму (opens in a new tab), то необходимо установить класс p-card--padding-3, он установит внутренний отступ в размере 16px. Никакие другие отступы устанавливать не нужно

В карточку вложено две карточки. Избыток теней, неверные отступы, текст не по одной линии, интерфейс становится грязным и неровным

Все элементы выровнены по единой линии, лишних теней нет, ничто не мешает считывать форму последовательно