Page pattern
Contribution / Breakdown
“Derived from the page purpose; write it explicitly before implementation.”
Understand which categories or segments make up a total and which contribute most.
Contribution / Breakdown — archetype wireframe
[ Total KPI ] [ Category breakdown ] [ Ranked contributors ] [ Secondary context ] [ Detail ]
Reading order follows the zones above, top-left to bottom-right.
Components: Bar charts, Stacked charts, Treemap, Matrix, Cards
Hierarchy: Context/control → status/primary answer → explanation/breakdown → detail → next step.
Interaction: Use only interactions that support the page's next analytical step; typical next level: **Category detail**.
Navigation: Category detail
Implementation: Compose from the listed native visuals/controls and the standard interaction patterns in this guide; custom visuals are exceptions.