Fragment components

A fragment combines several atom components into one piece with a specific job, like a filter bar above a table or a metric card on a dashboard. It sits between atoms, which each do one small thing, and UI patterns, which describe how to build a whole section of a page.

Fragments keep the same parts of the product looking and behaving the same wherever they appear. They cover page layout (the top bar, header, container and sections), tables (filtering, the footer and the bar for selected rows), and charts and metrics (trend charts, sparklines, progress rings, breakdown bars, legends and tooltips).

Like atoms, fragments live in the packages/foundation layer and are auto-imported by name. Use the fragment instead of rebuilding the same piece from atoms, so a fix or a design change lands everywhere at once.