Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Certification Rings Awards Block for Svelte

Six certification cells on shared hairlines, each with a foreground ring showing how much of the certificate's term has run, its name, issuer, last month and a standing worked out from a fixed day.

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 certifications band for Svelte with Ark UI. A centred header, then six cells on shared hairlines, rail to rail, ending the block. Each cell is a ring, the catalog's circular progress in your theme's foreground, showing how much of the certification's term has run as of a fixed day, with the share in its middle, then the certification as the heading, who issued it, "Valid until" its last month and its standing in words: "In term", or "Renewal due" inside 90 days of the end. Three across from md and two on a phone. The page's rails and top rule come from the Guides spine. Terrawick, the Slateworth Council, the Gullhurst Standard and the certifications are made up: replace them with your own.

FAQ

How do I change the certifications?

Edit CERTIFICATIONS at the top of the file: each has a name, an issuer, the day it was issued and its last day. The ring's share, the label and the standing are all worked out from those days, so nothing else needs editing. Keep a multiple of three (or of two on a phone) so that every row of the band is full.

How is the share worked out?

From AS_OF, a fixed day the block is read as of: the days from the issue day to AS_OF, over the days from the issue day to the last day, rounded and held between 0 and 100. Nothing reads the clock at render, so the server and the browser agree; set AS_OF yourself to keep it current.

What decides Renewal due?

RENEWAL_WINDOW, 90 days: a certification whose last day is that close, or past, reads "Renewal due". The third cell is inside the window so both words show. The word, not a colour, carries the state.

How do screen readers read a ring?

Each ring is one image with a spoken label, "93% of the term has run", and its drawing and the number inside are not read separately. The certification is a heading in a list named Certifications, with the issuer and the last month as text.

Are these real certifications?

No. The council, the standard and the certifications are made up, and nothing here is a sustainability claim. If you show real certifications, name the certifier in text and use its official mark only if its rules allow it.

How does it fit on a phone?

The cells run two across in three rows, each with the same ring size, and long names wrap inside their cell. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the order mirrors and the rings fill the same way, since a ring is symmetric.

All 137 awards blocks