Card

Универсальные карточки. Бесплатно, MIT · Данные и показатели › Карточки

Установка

npx valyro-cli@latest add card

npx shadcn@latest add https://valyro.xyz/r/card.json

npm install valyro-ui

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

Пропсы

Prop	Type	Default
`variant`	`'default' \| 'outline' \| 'interactive'`	`'default'`	`interactive` adds hover lift and a focus ring — pair it with `asChild` and a link or button.
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Inner padding and gap between sections; `none` also clips content to the rounded corners (e.g. edge-to-edge media).
`asChild`	`boolean`	`false`	Render the single child element (e.g. an <a>) with card styling.

Составные части

Card.Header (CardHeader), Card.Title (CardTitle), Card.Description (CardDescription), Card.Body (CardContent), Card.Content (CardContent), Card.Footer (CardFooter)

Похожие компоненты

Item 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 — Раскрывающиеся секции

Назад: Timeline · Далее: Item Card · Весь раздел «Данные и показатели»