block · metric-card

Metric card and grid

A responsive description-list grid for neutral metric cards and their label-value context.

Install with npx @madojs/ui@latest add metric-card.

Block

Metric card and grid

Open invoices: 42 Three are due within the next seven days.
Monthly revenue: $24,780 Increased 12.4% from last month.
Collection rate: 97.4% Unchanged across the current month.
Average revenue per customer for the current billing month: $1,923 Calculated from customers with recorded activity.

Composition

Use a description list as the metric grid. Each card contains one dt label and one dd value with optional detail inside the value.

Public API

class mado-ui-metric-grid / card / label / value / detail: Responsive metric list and value presentation.
element data: Optional machine-readable value inside the visible dd.

Detected public classes

.mado-ui-metric-card
.mado-ui-metric-card-detail
.mado-ui-metric-card-label
.mado-ui-metric-card-value
.mado-ui-metric-grid

Detected public CSS properties

Accessibility contract

The description-list relationship keeps every metric label associated with its value.
Trend direction and units must be stated in text; color and arrow shape are not sufficient.

Keyboard

The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Mado UI theme theme

Resolved install order

Mado UI theme theme

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.

blocks/metric-card/mado-ui-metric-card.css {styles}/mado-ui-metric-card.css