Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Before After Awards Block for Vue

Three awards for a help desk in cells on shared hairlines, each with two results drawn as before and after bars, and a segmented control that switches the large figure between the year before and the year of the award.

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 before and after display for Vue with Ark UI. A centred header, a tally counted from the data and a Before / After segmented control sit above three award cells on shared hairlines, which end the block. Each cell has a drawn mark, the award, its programme and year, and two results. Every result shows two bars on one scale, the year before the award and the year of it, and a large figure with its change in words ("down 67%, from 94 min"). Choosing Before or After rolls the digits to that year's figure, turns that year's bar solid and leaves the other as an outline. It's one column on a phone. The page's rails and top rule come from the Guides spine. It's built from Guides, Segment Group, Sliding Number, inline SVG and your theme's tokens. The awards and figures are made up for the example.

FAQ

How do I change the awards and results?

Edit AWARDS at the top of the file. Each award has a name, programme, fixed year, a shape for its mark and two metrics; a metric is a label, the before and after figures, a unit and whether it is a rate. Bars are drawn against the larger of each metric's two figures, so the longer bar always fills its track.

What does the toggle change?

Only the emphasis. Both figures are always in the text for assistive technology ("Before 94 min, after 31 min, down 67%, from 94 min"), so nothing is hidden by the choice. Sighted readers see the large digits roll to the chosen year and its bar turn solid; a polite status line says which year is showing. Nothing is saved or sent.

How is the change worked out?

From the two figures. A rate (a share in per cent) is compared in points, so 48% to 71% reads "up 23 points"; anything else is compared in per cent of the figure before. The direction is a word and an arrow, never a colour, and the outline bar is told apart from the solid one by fill, not hue.

What moves, and what about reduced motion?

The digits roll with Sliding Number and the bars change fill with a short CSS transition. Under reduced motion the bars change at once. The block's height never changes when you toggle, because both bars and the figure are always there.

How does it fit on a phone?

The three cells stack in one column, each with its two results one under the other, and the control spans the width. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the digits and bars keep their left-to-right order, as numbers do.

Are these real awards?

No. Mendwell and the Valeley programmes are made up, and so are the figures. Replace them with your own awards and results, and say in your copy how the year before and the year of each award were measured.

All 137 awards blocks