Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Judge Hover Card Awards Block for Vue

The 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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A judge panel for Vue with Ark UI. A centred header with a count taken from the list ("6 judges, 4 countries") sits above six cells on shared hairlines that run from rail to rail and end the block: three across from lg, two on a phone. Each cell has an initials avatar, the judge's name, role, workplace and city, and the fields they judged as small outlined tags. The name is a button that opens a hover card with a short bio, on hover and on keyboard focus; the bio is also in the cell for a screen reader, and shown in the cell where a hover card can't open, as on a touch screen. It's built from Avatar, Badge, Hover Card, Guides and your theme's tokens, with a CSS transition for the entrance. The Mosshurst Cup and the judges are made up for the example.

FAQ

How do I change the judges?

Edit JUDGES at the top of the file: each has a first and last name, a role, an org, a city and country, the judged fields as a list and a short bio. The header's count is taken from the list, so the number of judges and of distinct countries always matches the cells. Keep a multiple of three, or of two for the phone layout, so every row is full.

When does the hover card open?

On hover and on keyboard focus of the name button, and the cell is a large target because the button stretches over it. Escape closes it. A tap on the name also opens the card.

What does a phone user see?

Where the device can't hover, each cell shows its bio inline, clamped to four lines, so nothing depends on a hover card. Elsewhere the bio stays in the cell as hidden text and is read as the name button's description.

How do screen readers read a judge?

The judges are a list named "Mosshurst Cup judges". Each item has the name as a heading holding the button, then role and workplace, the city, a list of what the judge judged and the bio, read as the button's description. The avatar is decorative and hidden.

Are the judges real?

No. The cup, the judges, their workplaces and their bios are made up for the example, and Panelist is a made-up platform. Use real people only with their permission, and photos only if you have them: the avatars are initials on purpose.

How does it fit on a phone?

Two cells across, each with the avatar, name, role and tags wrapping in its own box; the bio shows inline on touch. The header centres above, and nothing scrolls sideways at 320 pixels.

All 137 awards blocks