Card
Контейнер-картка з шапкою, тілом і підвалом на токенах поверхонь.
У чотирьох проєктах «картка» — це десятки інлайн-наборів
rounded border bg p-*, кожен зі своїм радіусом і тінню. Тут — одна
картка на токенах --radius-card, --bg-card, --shadow-card, тож усі
поверхні застосунку однакові.
Приклад
Сплатити зараз
Тіло картки: текст, форми, будь-який вміст. Шапка й підвал — опційні.
Клікабельна картка
З hoverable — легкий підйом при наведенні.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
as | string | "div" | HTML-тег кореня: `section`, `article`, `li`… |
padding | mdsmnone | "md" | Внутрішні відступи тіла. Шапка й підвал мають власні. |
hoverable | boolean | false | Підйом при наведенні — для клікабельних карток. |
Слоти
| Назва | Опис |
|---|---|
default | Тіло картки. |
header | Шапка з нижньою межею: заголовок, дії. |
footer | Підвал з верхньою межею: кнопки, метадані. |
Коли використовувати
Як поверхня для групування: карточки статистики, елементи списку,
панель налаштувань. hoverable — лише коли ВСЯ картка клікабельна.
Коли НЕ використовувати
Не вкладайте картку в картку: замість ієрархії виходить рамка в рамці. Для вкладених секцій використовуйте заголовки й відступи.
Не будуйте модалки з карток — є Modal, і він керує фокусом і стеком.
Доступність
hoverable підсилює лише візуально; для клікабельної картки корінь має
бути <a>/<button> (as="..." + власний обробник) — <div @click>
недоступний із клавіатури.