shadcn.io is not affiliated with official shadcn/ui
Announcement Blog Block for Svelte
A notice board: the lead announcement as a split with a framed card-in-card panel and a Shine Button, and the past announcements as a description list band.
Installation
Overview
An announcements section for Svelte with Ark UI, written for Ledgermoss, bookkeeping software. The lead announcement is a split: its copy at the start (category, title, dek and byline) and, at the end, a framed panel with + marks on its corners, a card inside a tinted shell, drawing a big "4.0" numeral in a ring-bordered square under a masthead, with the Shine Button "Read the announcement" at its foot. Under it, a band of past announcements runs from rail to rail and ends the block: a description list of date, title (each row's one link) and a category badge. The numeral is set in your theme's tokens, never a photo. On a phone the panel sits under the copy. It's built from Guides, Badge, Avatar, Button and Shine Button. For release notices, policy updates and any page that pins one piece of news over its archive.
FAQ
How do I change the lead and the past announcements?
Edit LEAD and PAST at the top of the file. LEAD has a title, a dek, an author, an ISO date, the reading time, an href and the numeral the panel sets. PAST is a list of a title, a date, a category (Product, Community or Policy) and an href. Dates are fixed and formatted in UTC; the list is newest first.
Why is the past list a description list?
Each announcement is a date (the term) with its title and its category (the descriptions), which is what a dl means, and a screen reader announces the date before the title. Each row is one link, its title: the link's after: box covers the row. The date has a hidden "Published" in front of it.
How is the panel built, and where does the button link?
A shell with a tint and a hairline holds a raised bg-card panel with a ring and a shadow, and the corner marks are Guides around the shell. The numeral cover is set in container units and hidden from assistive technology; the title and dek beside it carry the meaning. Read the announcement is the only link in the lead, so the title isn't linked twice.
The Shine Button's asChild receives its props: spread them onto your router's link.
How does it fit on a phone?
The copy comes first, the framed panel follows under a drawn rule, and the past announcements are rows whose title drops under the date and the badge. The Shine Button is on the second screen at most and nothing scrolls sideways at 320 pixels.