@gridui/metrics-section

Landing family. Public API: MetricsSection, MetricsSectionItem, MetricsSectionProps.

Import components from @gridui/metrics-section and load @gridui/metrics-section/styles.css after Theme. Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.

See component ownership and release history.

Metric sections

MetricsSection from @gridui/metrics-section composes a full-width summary heading and Metric cells inside one Grid frame="internal". Grid draws the heading seam and cell separators; FrameSection owns the outer frame. MetricsSection sets 16px block and 24px inline title padding, 24px metric padding, one column below 40rem, and two columns above it. An incomplete final row fills the available tracks. No application-specific border styles or divider flags are needed.

Pass title, keyed items, loading, optional failed, and notice. Each item supplies Metric's label, value, optional value ID, and description. The title and metric cells remain mounted while loading; values are hidden by LoadingSurface with independent phases. Failure retains the title and frame, replaces metrics with a full-width notice, and ends metric loading. A completed empty item list keeps the title without a continuing loading surface. Applications own requests, calculations, formatting, localized text, and retry actions.