Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Annual Report Awards Block for Svelte

A printed recognition report as a framed page for a farm-management suite: a drawn laurel cover at the start, a Highlights description list with dotted leaders and a four-segment quarter bar at the end.

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

An annual recognition report for Svelte with Ark UI. A split behind a solid divider with + marks: at the start a small drawn cover, a framed page with a laurel wreath, the title "Recognition report" and the year, all in greyscale; at the end the heading, a "Highlights" description list with dotted leaders (awards won, categories, countries, the busiest quarter, the top honour) and a four-segment bar of awards by quarter. Every figure is counted from one list of awards. On a phone the cover is small and sits under the heading. It's built from Guides, the catalog DataList, an inline SVG laurel and your theme's tokens. The awards and the programme are made up for the example: replace them with your own.

FAQ

How do I change the awards?

Edit AWARDS: each has a title, a category, a country, a fixed date and a top flag for the one honour the report leads with. Awards won, categories, countries, the busiest quarter and the bar are all counted from that list, and the year on the cover comes from the first date.

How is the quarter bar drawn?

Each segment's width follows its count through a written-out grow-* class, so the busiest quarter is the longest, and it is the solid one. Each quarter is a list item with its label and count under the bar, so the numbers are also text; the bar itself is a drawing.

Can I put a real cover image in?

Yes. The cover is a figure whose caption holds the title and the year as text; replace the drawn laurel inside it with an img of your own cover and keep the caption for the text.

What do screen readers hear?

The heading, then the cover's caption ("Evergrain, Recognition report, 2025"), then "Highlights" as a description list and the quarter list with each count and the word "awards". The laurel, the dotted leaders and the bar segments are drawings hidden from assistive technology.

Is it a print layout?

It looks like a page but it is the same responsive block as the others: it does not add print styles or a download. If you want a printable report, link to a PDF next to it.

Are these real awards?

No. Oakthwaite Awards, Evergrain and every award here are made up, and the countries are only places the example programme runs an edition. Dates are fixed in the data.

All 137 awards blocks