Item Card

Карточка-строка: иконка, заголовок, описание и элемент управления справа. Pro · Данные и показатели › Карточки

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add item-card

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ItemCard } from 'valyro-ui-pro';

Prop	Type	Default
`icon`	`ReactNode`		Icon in the leading tile.
`imageSrc`	`string`		Image in the leading tile instead of an icon (a logo, a cover).
`iconTone`	`'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'neutral'`	Tints the icon tile. Default `neutral`.
`title` *	`ReactNode`		Main line.
`description`	`ReactNode`		Muted line under the title.
`meta`	`ReactNode`		Extra content under the description: tags, a progress bar, meta.
`trailing`	`ReactNode`		Control at the end: a switch, a select, a button, a value.
`href`	`string`		Makes the whole card a link (the trailing control stays separately clickable).
`variant`	`'filled' \| 'outline' \| 'plain'`	`'filled'`	`filled` tinted card (default), `outline` bordered, `plain` no surface (rows inside a panel).
`size`	`'sm' \| 'md'`	`'md'`	Density. Default `md`.

Card — Универсальные карточки
Record Card — Карточка записи: статус, контекст, ключевые поля и действия
Carousel — Карусель: scroll-snap, свайп, автопрокрутка, миниатюры
Empty State — Экран отсутствия данных
Data Table — Таблицы с поиском и сортировкой
Data Grid — Таблица на 100 000 строк: группировка, фильтры, редактирование
Virtual List — Виртуальный список на 100 000 строк
Bulk Action Bar — Панель действий над выбранными строками с горячими клавишами
List Block — Блок списка с картинками или иконками, описанием и значением
Description List — Список «ключ — значение»: столбиком, строками или сеткой с иконками
Tree View — Древовидные структуры
Accordion — Раскрывающиеся секции