Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Lifetime Achievement Awards Block for Vue

One honoree: a framed drawn medallion with a monogram beside the header, a dated career ladder from 2000 to 2025 and the council's citation, presented by a made-up institute.

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 lifetime achievement block for Vue with Ark UI. A split with a divider. At the start a framed figure with a large drawn oval medallion, two outlines and a small star with the honoree's monogram in the middle and no portrait, over the award's name and year. At the end the header, whose years of service are counted from the first and last steps of the career; a career ladder as an ordered list with one dated line per step from 2000 to 2025; and the council's citation as a quotation. On a phone the figure sits under the header and above the ladder. The page's rails and top rule come from the Guides spine. It's built from Guides and an inline SVG, with CSS transitions for the entrance. The council, the institute, the company and the person are made up for the example.

FAQ

How do I change the honoree?

Edit HONOREE, AWARD_YEAR and CAREER at the top of the file. The monogram is the first letters of the first and last names, the number of years in the header is the last step's year minus the first, and the ladder is the list in order.

Can I show a portrait instead of the monogram?

Yes. Replace the span that holds the monogram with an img inside the same box and give it a real alt text, or keep the medallion's outline as a frame around it. The medallion is a drawing hidden from assistive technology; the honoree's name is in the heading text and the citation.

How are the career steps read by a screen reader?

As an ordered list: each step is its year, then the line. The years sit in a bidirectional-isolation element so they keep their order in a right-to-left layout. Dates are fixed text, never computed from today.

What changes on a phone?

The medallion moves between the header and the ladder, a little smaller, in its frame. The ladder keeps its two columns, a year and a line, and the citation closes the block. Nothing scrolls sideways at 320 pixels.

In what order is the block read?

Header, medallion with its caption, the career, then the citation. On a wide screen the medallion is drawn first, at the start, but it comes after the header in the page, so a screen reader meets the heading first.

Are the people and the institutions real?

No. Fjordcode, the Birchwick Council, the Aspenhaven Institute and the honoree are invented, and so is every date in the career.

All 137 awards blocks