Record Card
Record card: status, context, key fields and actions. Pro · Data and metrics › Cards
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add record-cardnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { RecordCard } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
title * | ReactNode | Name of the record: an incident, an order, a ticket. | |
description | ReactNode | One or two sentences under the title. | |
meta | ReactNode | Small uppercase context line: "Production · API". | |
status | RecordCardStatus | Status pill at the end of the meta line. | |
fields | DescriptionListItem[] | [] | Key facts shown in an inset panel. |
columns | number | 2 | Columns of the fields panel. Default 2. |
actions | ReactNode | Buttons at the bottom. | |
children | ReactNode | Free content between the fields and the actions. | |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 3 | Level of the title (default 3). |
Related components
- Card — All-purpose cards
- Item Card — Row card: icon, title, description and a control on the right
- 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: Item Card · Next: Carousel · All Data and metrics