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