Search blocks by description or jump to a page.
Stat cards that reveal extra detail or a chart when you hover over them. Use it when you want a number to expand into context on a feature page.
Interactive Hover is a four card stats grid. A centered heading area sits above the grid with a small badge, a bold section title, and a one-line descriptor. Each card in the grid has an icon and label at the top, a trend indicator with an arrow and percentage in the opposite corner, a large headline number in the body, and a footer row showing the last updated time. When a visitor hovers a card, a subtle background wash fades in, the card lifts slightly, and a hidden detail panel slides open below the headline number. That panel shows the current period value, the prior period value, and a short table of three breakdown rows such as quarter over quarter change, year over year change, and a contextual highlight.
All four cards follow the same structure, so you can add or remove cards freely. The badge, section title, and descriptor are plain copy. The trend direction on each card drives the green or red arrow automatically, so swapping the percentage text is all that is needed to flip the indicator color. The three breakdown rows inside the hover panel are independent, and any label or value pair can be replaced with whatever context fits your metrics.
Reach for this block on a storefront or brand results page where a flat row of numbers would feel thin. The hover interaction rewards visitors who want context, such as how average order value compares to the previous quarter or which product category is driving the most revenue, without crowding the resting layout. Compared to a simple three column strip, this layout can carry four metrics and still hide the supporting data until someone asks for it, which keeps the section from feeling like a dashboard.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The block suits any set of four metrics that benefit from a before and after comparison. A few directions that work well for an ecommerce brand:
Tip: keep the three breakdown rows in the hover panel short labels and single values so the panel opens and closes cleanly without jumping.