Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Hexagon Badge Credential Showcase Team Block for Svelte

One person's six credentials as a framed shelf of hexagonal badges drawn in CSS, each picked to fill a panel with its issuer, credential ID, issue date, valid-until date and a Verify 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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A credential showcase for Svelte with Ark UI, for one person: Ingrid Solheim, safety lead at Chillingham, a safety-training app. A header names her, counts her credentials and says which renews next (found from the dates). Under it a framed shelf holds six hexagonal badges, each drawn in CSS with its issuer's monogram and named by the credential under it. Pick a badge and its band thickens, the label turns bold and a panel under the shelf shows the issuer, the credential ID, the issue date and the date it is valid until, with a Verify link to the issuer's check page. Three badges to a row on a phone, six from sm. It's built from Toggle Group, Avatar, Shine Button and Guides, with a clip-path hexagon and your theme's tokens. For profile pages and trust pages. The person, the issuers and the credentials are made up, and Verify goes to # until you give each credential its real href.

FAQ

How do I change the credentials?

Edit CREDENTIALS at the top of the file. A credential has a title, an issuer, a two-letter monogram, a number, issued and until dates as ISO strings and an href for Verify. The "next to renew" line in the header is found by sorting the until dates, so nothing else needs editing. Keep six for a full shelf; fewer leave empty cells at the end of the row, more wrap onto a second shelf.

How is the hexagon drawn?

Two stacked spans share a clip-path polygon. The outer one is a solid mix of the foreground colour; the inner one is the page surface, inset by 2 px, or by 5 px when the badge is picked, so a picked badge has a thick band and the others a thin one. The monogram is text on top. The whole drawing is hidden from assistive technology: the credential's name under it is what a screen reader reads.

How does the shelf work with a keyboard and a screen reader?

It is a group of toggle buttons named Credential, with exactly one picked at all times. Tab moves into it and the arrow keys move between the badges, picking as they go; a polite status line says which credential is shown. The panels of the other credentials are invisible, inert and hidden from assistive technology.

What does Verify do?

It is a link, drawn as the page's one Shine Button, to wherever you point href for that credential: the issuer's own public page for the number, for example. In this example it goes to #, because the issuers are invented. Nothing is checked in the browser.

Why doesn't the block change height when I pick a badge?

All six panels sit in one grid cell and only the picked one shows, so the cell is as tall as the tallest panel. On a phone the title and the issuer reserve two lines each, which is the most any of the six needs.

Are the dates computed from today?

No. Every date is fixed text in the data, shown with Intl.DateTimeFormat in UTC so the server and the browser agree. A credential that has lapsed by the time you read this is still shown with the date it had, which is what a record of what was issued should do.

All 126 team blocks