Kpi item<mds-kpi-item>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
descriptionstringSpecifies the description under the value in the KPI element
iconstringSpecifies the icon on the top of the KPI element
labelstringSpecifies the number to be displayed in the KPI element
thresholdnumberSpecifies the page threshold which starts the text animation
Overview
The <mds-kpi-item> web component is a compound child that represents a single key-performance-indicator entry - a prominent numeric label with an optional description and icon - inside its parent container <mds-kpi>. It carries no native HTML primitive of its own; it is a presentational list row that <mds-kpi> exposes as a list.
Semantic Behavior
Compound constraint: Must be placed as a direct default-slot child of <mds-kpi>; it is not used standalone, and the parent’s list semantics only make sense when its children are mds-kpi-item elements (do not mix in other child types).Accessible name: Each item is announced as one list entry, with its spoken text consolidated as "{label}: {description}" (a missing prop reads undefined).Scroll-triggered animation: When threshold is greater than 0, the label/description reveal with the yugop text animation once the item scrolls into the viewport. With threshold === 0 (the default) the text is rendered immediately with no animation.Conditional rendering: The icon, value, and description each render only when their respective prop is provided, so an item can show any subset of icon, value, and caption.
Properties & Visual Configurations
threshold: Controls the reveal-on-scroll behavior. Leave at 0 for static KPIs that should be visible immediately; set a value between 0 and 1 (the fraction of the element that must enter the viewport) to defer the scramble-in animation until the item is scrolled into view - useful for KPI strips lower on a page.label holds the headline figure (rendered as h2 typography) and description the supporting caption (rendered as label typography); together they form the item’s spoken accessible name, so prefer concise, self-explanatory values.icon takes an mds-icon name and adds a leading visual marker above the figure; omit it for text-only KPIs.Animation pacing and colors are tunable per item via the CSS custom properties documented in AGENTS.md (--mds-kpi-item-text-animation-speed, --mds-kpi-item-icon-color, and related).