Stats 5 block design & features
Stats5 is a metrics section built with shadcn/ui, presenting a large heading followed by three side-by-side percentage figures. Each metric shows an oversized primary-colored numeral, a short accent bar beneath it, a color-coded trend icon, and a text label. The three columns share a bottom border on medium screens and up.
The percentage values use bold type at a very large scale with a slightly smaller percent sign. A narrow rounded bar in the primary color sits below each number, acting as a visual anchor. Trend icons are tinted green for up, red for down, and blue for neutral, giving each metric an at-a-glance direction indicator. On hover, each metric group scales up slightly via a CSS transition.
The aesthetic is data-forward and sparse, using large numerals and generous whitespace rather than card containers or decorative elements. The section sits on a semi-transparent background tint. Complexity is low since all three metrics are hardcoded with no prop-driven data.
Below medium breakpoints the columns stack vertically, each separated by consistent vertical gaps.