Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Announcement Bar Awards Block for Svelte

A slim announcement bar for one headline award: a drawn laurel, one sentence naming the award and the programme, and a Read the story link.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A slim awards announcement for Svelte with Ark UI, to open a page or sit above a pricing table. Under the page's top rule and nothing else, the catalog Announcement is one link: a small drawn laurel at its start, "Kindling wins Best Developer Platform at the Cinderley Software Prize" and a muted "Read the story" with an arrow. On a phone the laurel goes, the sentence takes two lines and the link drops under it. It is built from Announcement and Guides, follows your theme and has one short fade on load. The awards and programmes are made up for the example: swap AWARDS for your own, and use only recognition you have actually received.

FAQ

Which award should it name?

One: your most recent and best known. A bar that rotates between awards says less than the one it picked; the other blocks in this category are for lists.

Is the award real?

No. The company and the programme are invented for the example.

Can it be dismissed?

No: it is part of the page, not a notice, and it has no state. For a bar a visitor can close, use one of the banner blocks.

What happens in a right-to-left page?

The laurel is symmetric, the arrow turns around and spacing is logical.

How does it fit on a phone?

The sentence wraps to two lines, "Read the story" under it, the bar inset a little from the page rails. Nothing scrolls sideways at 320 pixels.