Awards 3 - Awards list with hover accent rows

Pro

A titled section with intro text and stacked rows showing a color marker, award title, categories, year, and a sliding accent background on hover.

Description of the Awards 3 block design & features

Awards3 opens with a section heading and supporting paragraph, then lists each honor as a wide row separated by a bottom border and built with shadcn/ui spacing tokens. Each row aligns a small rounded color swatch with the award title, prints category labels beneath with left padding to match the swatch, shows the year below that, and places a corner arrow icon on the right so rows feel like interactive entries even before hover.

Interaction is the main visual event: a full-width accent panel sits behind the row and translates upward into view on hover, while text layers stay above it via stacking context. Color coding varies per item through background utility classes on the markers, giving each line a distinct badge read without swapping the whole palette.

Overall this skews modern and slightly editorial, with enough motion and color to feel less sober than a plain table yet still office-appropriate. It is moderately elaborate because of hover layering and the optional intro copy block in addition to repeating rows.

The layout is a single column throughout, so it mainly reflows by letting wrapped lines expand height rather than hiding columns.