List Block

List with images or icons, descriptions and values. Pro · Data and metrics › Lists and trees

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add list-block

npm install valyro-ui-pro

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

Prop	Type	Default
`title`	`ReactNode`		Heading of the block.
`description`	`ReactNode`		Muted line under the heading.
`items` *	`ListBlockItem[]`		The rows, each a tile with media, text and an optional value.
`layout`	`'default' \| 'narrow'`	`'default'`	`default`: large tiles with the value under the text; `narrow`: compact rows with the value at the end.
`empty`	`ReactNode`		Shown when `items` is empty.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the heading (default 3).