Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Ceremony Run Of Show Awards Block for Vue

A run of show for an awards night: an ordered list of the evening with its times, Lanternhall's two award moments in heavier type, and at the start a drawn stage and a description list of the facts.

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 ceremony recap for Vue with Ark UI. The evening as it ran, in order: an ordered list from 18:30 doors to 21:10 close, each row with its time and a line of detail, and the two moments the product won set in heavier type with a small drawn mark. From the lg breakpoint a framed drawn stage (curtains, a screen, a lectern and three round tables, in greyscale) and a description list of the night's facts (date, venue, hosts, categories and how many were won, counted from the list) sit at the start behind a solid divider with + marks. On a phone the run of show comes first, then the stage and the facts. It's built from Guides, the catalog DataList, inline SVG and your theme's tokens. The programme, the venue and the people are made up for the example: replace them with your own.

FAQ

How do I change the evening?

Edit RUN: each row has a time (24-hour, as the venue's clock), a title and a detail; set award: true and a shape on the moments that deserve the heavier type and the mark. The header's "doors at, close at" line and the count of awards won come from the first row, the last row and the awards in the list. The facts are DATE, VENUE, HOSTS and CATEGORIES.

Can I use a photo of the stage?

Yes. The stage is a drawing in a figure with a caption; swap the Stage component for an img of your own and keep the caption. A comment in the file marks the place.

Why does the run of show come first in the code?

So the reading order is the story: the heading, then the evening, then the facts. From lg the stage and facts are placed at the start of the row with grid placement; the document order does not change.

What do screen readers hear?

An ordered list named "Run of show", each moment a heading with its detail, and its time in a time element. The award moments read the same way, only larger on screen. The stage drawing is hidden from assistive technology; its caption is read.

What about right-to-left layouts?

Times and dates sit in bdi elements so they keep their order, and the columns mirror: the run of show moves to the start side and the stage to the end. The drawn stage is symmetric.

Are these real people and places?

No. The programme, the venue and the hosts are made up for the example, and the date is fixed in the file.

All 137 awards blocks