Отображение данных
Карточка
Объект, который можно было бы перетащить. Карточек столько, сколько пришло из данных, — в отличие от панели, которая есть место на экране.
Разметка
<div class="inst-card">
<div class="inst-card-title">worldgen-01</div>
<div class="inst-card-sub">terrain/heightmap.ts · 4 файла</div>
</div>
Карточка — колонка с просветом между детьми. Шапка не упирается в содержимое, и заголовок не читается частью первой строки данных.
Использование
<div class="inst-card">
<div class="inst-card-title">worldgen-01</div>
<div class="inst-card-sub">terrain/heightmap.ts · 4 файла</div>
</div>
| Что | Обязательно | Почему |
|---|---|---|
inst-card-title |
нет | Заголовок объекта. Карточка без него — просто рамка |
<a> или <button> для кликабельной |
да | Модификатор даёт вид, роль даёт тег. div с обработчиком недоступен с клавиатуры |
Настоящий заголовок (<h3>) в списке карточек |
нет, но обычно да | inst-card-title оформляет, но не объявляет: навигация по заголовкам без него не работает |
Когда использовать
| Используйте | Возьмите другое |
|---|---|
| Объект списка со своим заголовком и составом | Область приложения — панель: у неё есть шапка с действиями и своя прокрутка |
| Плитка в адаптивной сетке | Строка списка — строка очереди плоская: у неё нет тела, и на сотне строк рамки превращаются в сетку |
Кликабельный объект — --interactive |
Ряд чисел — метрики без рамок: четыре числа это одна группа, а рамка вокруг каждого делает четыре объекта |
| — | Выбор варианта — выбираемая карточка с радио внутри |
Варианты
Интерактивная
Разметка
<a class="inst-card inst-card--interactive" href="#">
<div class="inst-card-title">Открыть прогон</div>
<div class="inst-card-sub">Вся карточка — цель нажатия</div>
</a>
Модификатор добавляет отклик на наведение и фокус, но не делает элемент
кликабельным: им должен быть <a> или <button>. Карточка-div с
обработчиком клика недоступна с клавиатуры и не имеет роли.
Правила
Так Кликабельность через a или button
Роль, клавиатура и средний клик приходят от тега. Модификатор отвечает только за вид.
Не так div с обработчиком клика
Он недоступен с клавиатуры, не имеет роли и не попадает в порядок обхода.
Так Одна цель на карточку
Если кликабельна вся карточка, второй ссылки внутри быть не должно.
Не так Рамка вокруг каждого числа
Ряд сравнимых чисел — одна группа: метрики стоят без рамок.
Доступность
| Кликабельность | Только через <a> или <button>. Модификатор даёт вид, роль даёт тег |
| Одна цель, а не две | Если вся карточка кликабельна, внутри не должно быть второй ссылки: клавиатура получит две остановки на один объект |
| Заголовок | inst-card-title — визуальный. Для списка карточек уместен настоящий заголовок (<h3>), чтобы работала навигация по заголовкам |
| Фокус | Кольцо с отступом 1px по внешнему краю. Радиус наследуется от карточки |
| Тени нет | Глубина передаётся поверхностью. Тень в этом ките означает «временное и сверху» и принадлежит только поповеру и модалке |
API
| Имя | Значение | Что делает |
|---|---|---|
| класс | ||
inst-card | — | Базовый |
inst-card-title | — | Заголовок объекта |
inst-card-sub | — | Подпись под заголовком |
| модификатор | ||
inst-card--interactive | — | Отклик на наведение и фокус |
| токен | ||
--surface-raised | light-dark(var(--n-0), var(--n-12)) | |
--border | light-dark(oklch(0 0 0 / 0.12), oklch(1 0 0 / 0.11)) | |
--hairline | 1px | |
--radius-lg | 11px | |
--pad-card | var(--space-6) | |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument