Card

Card — составной компонент карточки: обложка, заголовок, описание, действия и нижняя строка с исполнителем и сроком.

Card.Root задаёт фон (нейтральный или свой через color), рамку, паддинги и скругление и держит ритм между зонами. Зон три, и все они необязательны: Card.Header — обложка и заголовок поверх неё, Card.Content — основное содержимое, Card.Footer — нижняя строка, отделённая от контента увеличенным отступом.

Содержимое собирается из частей — Card.Title, Card.Description, Card.Preview, Card.Info. Часть смотрит на зону, в которой лежит: Card.Preview в шапке растягивается во всю ширину карточки без паддингов, а в контенте остаётся в их границах со скруглением. Card.Actions — единственная часть вне зон: это прямой ребёнок Card.Root, потому что позиционируется в правом верхнем углу поверх всего остального.

Сама карточка неинтерактивна — это div, а не кнопка: переход по клику вешает потребитель на свою обёртку. Клики по Card.Actions при этом не всплывают, так что кнопки действий с такой обёрткой не конфликтуют.

Строку с аватаром в футере удобно собирать компонентом EntityLabel: у него нет своего фона и паддингов, в отличие от Cell.

Заглушка карточки на время загрузки — отдельный компонент CardSkeleton с теми же частями.

Card.Title — заголовок карточки в одну строку: длинный текст не переносится, а обрезается многоточием. icon — иконка слева от текста (компонент из @phosphor-icons/react), она не сжимается и остаётся видна целиком при любой длине заголовка.

Card.Description — текст под заголовком caption-типографикой приглушённым цветом. Обрезается многоточием после четырёх строк, поэтому карточки в списке не разъезжаются по высоте из-за одного длинного текста.

Card.Preview в Card.Header — обложка карточки: растягивается во всю ширину, гасит паддинги Card.Root и прижимается к его верхнему краю без скругления. Высота изображения ограничена, лишнее кадрируется по центру, так что картинки любых пропорций дают одинаковые карточки. src обязателен, alt — по ситуации.

Card.Preview и Card.Title вместе в шапке: изображение затемняется полупрозрачной подложкой, заголовок становится белым и прижимается к нижнему краю картинки. Отдельного пропа для этого нет — режим включает само соседство частей в Card.Header.

В Card.Content изображение остаётся в границах паддингов и получает скругление. Место в контенте — любое: до заголовка, между заголовком и описанием или после описания, перед футером. Заголовок поверх картинку в контенте не ложится — это поведение только для шапки.

Card.Footer — нижняя строка: произвольный контент слева (например, подпись исполнителя) и Card.Info — короткая справка справа. Card.Info прижимается к правому краю, не переносится и не сжимается, поэтому длинное содержимое слева усечётся раньше, чем срок справа.

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

Клики по блоку не всплывают и не запускают действие по умолчанию, поэтому карточку с действиями можно оборачивать в ссылку или вешать onClick на обёртку: нажатие на «Удалить» не приведёт к переходу.

Блок действий — прямой ребёнок Card.Root, поэтому он лежит выше любой зоны: и над обложкой в шапке, и над заголовком, который на неё наложен. Порядок частей в разметке на это не влияет — Card.Actions можно ставить хоть перед Card.Header, хоть после него.

Кнопки не растворяются в картинке: у блока своя подложка с тенью и скруглением, как у панели инструментов. Отдельного режима «действия на изображении» нет — разметка та же, что и у карточки без обложки.

color — цвет фона карточки, принимает любое CSS-значение и заменяет нейтральный фон вместе с рамкой. Цвет текста подбирается автоматически: на тёмном фоне — белый, на светлом — чёрный; описание и Card.Info остаются приглушённее заголовка, но в том же контрастном цвете.

Карточки сущностей без собственного цвета — проектов, досок, категорий — красит хелпер getStableColor: одно и то же название всегда даёт один и тот же цвет, поэтому карточка выглядит одинаково во всех списках. Цвет из названия «переедет» при переименовании — чтобы закрепить его навсегда, передайте в хелпер id сущности.

Цветной фон и обложка не мешают друг другу: Card.Preview в шапке по-прежнему растягивается во всю ширину, а цвет остаётся видимым ниже картинки — в контенте и футере.

Заголовок поверх изображения всегда белый на затемняющей подложке и от color не зависит: контраст ему даёт картинка, а не фон карточки. Автоподбор по фону работает для остального текста — на светлой карточке описание и Card.Info станут чёрными, а заголовок на обложке останется белым.

Кнопки действий в правом верхнем углу карточки — видны по наведению или при фокусе внутри; клики не всплывают.

Шапка: Card.Preview во всю ширину карточки и/или Card.Title поверх изображения.

Основная зона: Card.Title, Card.Description и Card.Preview в любом порядке, плюс произвольный контент.

Нижняя строка: доп. контент и Card.Info в один ряд.

Заголовок: одна строка с многоточием, слева — опциональная иконка (icon).

Описание: обрезается многоточием после четырёх строк.

Изображение карточки: src обязателен, alt — по ситуации; вид зависит от зоны, в которой лежит.

Строка доп. информации в футере — прижимается к правому краю и не переносится.