AttributeCard

AttributeCard UI component. Import from "@desk/ui/compositions/attribute-card".

Slip resistance

R10

DIN 51130 rated

Usage

import { AttributeCard, AttributeCardProps } from "@desk/ui/compositions/attribute-card";

Use AttributeCard for a single label + prominent value stat tile (a KPI/metric); for many key/value pairs about one entity reach for DescriptionList instead.
Pass a Lucide component to icon (e.g. RulerIcon), not a rendered <Icon/> — it is handed to the internal Icon at a fixed sm size.
This is a preset composition of Card; restyle via the surrounding layout rather than reaching inside — for a bespoke layout compose Card/CardContent directly.

Prop	Type	Description
attributeLabel(required)	`string`	Attribute label
className	`string`	CSS class name
icon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`
valueLabel(required)	`string`	Current value
valueSubLabel	`string`	Current value

Builds on