shadcn.io is not affiliated with official shadcn/ui
Government Register Awards Block for React
Three public-sector register entries as cells apart, each with a drawn crest, a reference with a Copy button, lot, tier, last day and a standing worked out from a fixed day, plus an outline link to the official register.
Installation
Overview
A public-sector register for React with Base UI. A start-aligned header with an outline "Official register" link at its end, then three framework entries as cells apart, each with its own overshoot lines. A cell opens with a drawn crest (a shield with its own glyph) and the framework as the heading under the council's name, then the register reference in a mono box with a Copy button, then the lot, tier, last day and standing in a two-column list. Standing is worked out from a fixed day: "Active", or "Renewal due" inside 90 days of the end. The cells stack on a phone. The page's rails and top rule come from the Guides spine. The Tealworth Council, the frameworks and the references are made up and nothing links to a real register: replace them with your own entries.
FAQ
How do I change the entries?
Edit ENTRIES at the top of the file: each has a framework, lot, tier, reference and last day, plus glyph, one path in a 64 by 64 box drawn inside the shield. Add a fourth entry and the grid still reads well on lg if you change lg:grid-cols-3 to lg:grid-cols-4 or let it wrap.
How is the standing decided?
From AS_OF, a fixed day the block is read as of, and RENEWAL_WINDOW, 90 days. An entry whose last day has passed reads "Lapsed", one inside the window reads "Renewal due", and the rest "Active". The third entry is inside the window, so you can see both words.
What does Copy do?
It copies the reference exactly as shown (for example REG-20418) to the clipboard and says "Copied" to screen readers; if the clipboard refuses, it says so. Browsers allow the clipboard only on secure pages (HTTPS or localhost). The label of each button names the reference it copies.
Where does Official register go?
It is a link to # in the example. Point it at the register's own page; use the authority's real name in text only if it is the real authority, and never draw its crest unless its rules allow it.
Are these real frameworks?
No. The council, the framework names and the references are made up, and the crests are drawn by the block. They are not copied from any government body, and nothing here is a compliance claim.
How does it fit on a phone?
The header link sits under the sentence, and the three entries stack in one column, each cell the same shape. The reference box and the two-column list stay as drawn down to 320 pixels. In a right-to-left layout the cells mirror, while references and dates keep their order.
Related
- Pro
Verification Lookup Awards
Filters and searchA certificate number lookup with a labelled field and a Shine Button, sample numbers as chips and a live result panel that reads Valid, Expired or Not found against four typed records.
- Pro
Certificate Awards
One featured awardA formal certificate of award as HTML with a double hairline frame, a drawn laurel, the recipient, a citation, two signature strokes and a seal, beside a details list and an outline Verify link.
- Pro
Certification Rings Awards
Cards and gridsSix 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.
- Pro
Details Awards
Cards and gridsThree award data sheets for a monitoring tool: a drawn mark and the award's name over a description list of result, programme, category, entries judged, announcement date and prize.
- Pro
Status Grouped Compliance Badges About
Security and platformA compliance list for a vendor-risk tool grouped by status, In force and In progress, each row a generic programme with its scope, last audit and next step, with a ghost link to request the report.
- Pro
Audit Table Footer
Trust and complianceA footer for a backup vault with an audit table in a framed figure (the programme, its scope, how often it is audited and a link to request the report) beneath the brand and three link columns.