Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Paper Cards Research Awards Block for Vue

Six award-winning papers for a lab notebook as cards on shared hairlines: venue, title, year, the award and a mini column chart of citations per year, with papers, citations and h-index derived in the header.

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 set of paper cards for Vue with Ark UI. A start-aligned header has a description list at its end with three figures derived from the typed list: the papers, the citations and the h-index. Under it a band of six cards shares its hairlines and ends the block. Each card is an article with the venue and volume, the year, the paper's title as a heading, the award it won, and at the foot the number of times it has been cited with a small column chart of citations in each year from 2021 to 2025, all on one scale. The chart is an SVG with a text summary; it is hidden below sm, where the number stays. Two columns from md, three from lg, one on a phone. The page's rails and top rule come from the Guides spine. It's built from Guides, Badge, inline SVG and your theme's tokens. The Briarton Quarterly, Labbook and the papers are made up for the example.

FAQ

How do I change the papers?

Edit PAPERS at the top of the file: each has a title, a volume, the fixed publication year, the award and cited, the citations in each year of YEARS, oldest first. The totals on the cards, the header's papers and citations, the h-index and the chart heights are all computed from that.

How is the h-index computed?

The totals are sorted from most to least cited, and the h-index is the number of papers whose total is at least their position in that order: with totals of 214, 156, 97, 61, 38 and 5 it is 5, because the sixth paper has fewer than 6 citations. It is a plain helper at the top of the file.

How does the chart read for a screen reader, and why is it hidden on a phone?

The chart is an SVG named by its title, which lists the citations for each year, and the total is in the text beside it. Below sm the chart is hidden to keep the card short and the number stays. The columns share one scale, so a taller column in one card means more citations than a shorter one in another.

Are these real papers?

No. The Briarton Quarterly, Labbook and the papers are made up for the example, and so are the citation counts. Use your own papers; a real venue's name belongs in text, never its logo.

How do the cards share hairlines?

They sit in a grid with a one-pixel gap over a border-coloured background, each card on a solid background, so the lines between them are single lines in every theme. Six cards fill the grid evenly at one, two and three columns.

All 137 awards blocks