Item Card
Row card: icon, title, description and a control on the right. Pro · Data and metrics › Cards
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add item-cardnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ItemCard } from 'valyro-ui-pro';Props
| 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. |
Related components
- Card — All-purpose cards
- Record Card — Record card: status, context, key fields and actions
- Carousel — Carousel: scroll snap, swipe, autoplay, thumbnails
- Empty State — No-data screen
- Data Table — Tables with search and sorting
- Data Grid — Grid for 100,000 rows: grouping, filters, inline editing
- Virtual List — Virtual list for 100,000 rows
- Bulk Action Bar — Actions for selected rows, with keyboard shortcuts
- List Block — List with images or icons, descriptions and values
- Description List — Key–value list: stacked, inline or a grid with icons
- Tree View — Tree structures
- Accordion — Collapsible sections
Previous: Card · Next: Record Card · All Data and metrics