Hexagon Badge Credential Showcase Team Block for React

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.

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.

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.

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.

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.

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.