shadcn.io is not affiliated with official shadcn/ui
Inline Hover Card Prose Awards Block for React
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 Base 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.
Related
- Pro
Masthead Featured Article Awards
Press and quotesA feature article about a newsletter platform set as a clipping: headline, byline, an excerpt with a drop cap and a link, beside a drawn masthead and a description list of publication, section, date and reading time.
- Pro
Year Rail Timeline Awards
TimelinesA vertical rail of awards by year for a planning tool, a node for each year on a solid hairline with its awards as rows, and the older years behind a View earlier years Collapsible.
- Pro
Origin Story Awards
TimelinesThe story of one award submission for a note-taking app: a prose column with a pull-stat counted from the milestones, a rail of dated milestones from Week 1 to Week 40 and a drawn plaque to finish.
- Pro
Judge Hover Card Awards
People and teamsThe jury of a hackathon cup as six cells on shared hairlines, each an initials avatar, a name, a role, a workplace and the fields judged, with a short bio in a hover card on hover, focus or touch.
- Pro
Chair's Quote Seal Awards
One featured awardOne large quotation from a prize jury's chair for a citation manager, under a heading, with the chair's name and role, beside the programme's seal drawn as a scalloped rosette in a frame.
- Pro
Minimal Typography Awards
Lists and tablesAwards as pure typography for a writing app: five lines between hairlines, each the year in tabular figures, the award at heading weight and its programme muted, with no drawings, icons or buttons.