shadcn.io is not affiliated with official shadcn/ui
Inline Hover Card Prose Awards Block for Radix UI
A short story in running text with five award names set in the sentences as quiet buttons, each opening a hover card with a drawn mark, the award, the programme and year, and the category.
Installation
Overview
Awards told inside a story, for React with Radix UI. A centred header counts the awards from the list ("5 Lumenbrook Awards since 2022."), then one narrow article of running text in the Prose style carries five award names inside its sentences, each a quiet button with a light foreground highlight under the words. Hovering one, focusing it with the keyboard or tapping it opens a small card with a drawn mark (a different shape for each award), the award, the programme with its year, and the category. A screen reader hears the programme, year and category straight after the name, so nothing depends on the card. There are no buttons and no list: the story is the block. It's built from Prose, Highlight Text, Hover Card, Guides and your theme's tokens, with a CSS transition for the entrance. The awards and the product are made up for the example.
FAQ
How do I change the awards in the text?
Each award is a constant at the top of the file with a title, programme, category, shape and fixed year. In the paragraph, an award appears as <AwardName award={…} /> between your own words; the header's tally is counted from the AWARDS list. Years are plain numbers, so an award given in 2024 stays 2024.
How does the card open?
On hover and on keyboard focus of the name, and on a tap on a touch screen. Escape closes it, and moving focus away does too. The mark on the card is a stroked drawing in your foreground colour, chosen by the award's shape.
How does it read to a screen reader?
The names are buttons in the sentence, and each reads its name followed by the programme, year and category, so the card is a bonus, not a requirement. The highlight is decorative.
Can I change the highlight?
Yes. The marker is the foreground colour at 12 percent, set once in MARKER, so it follows light and dark themes. Replace it with another colour with enough contrast for the text, or drop the Highlight Text and keep the dotted underline.