shadcn.io is not affiliated with official shadcn/ui
Annotated Seal Awards Block for Vue
A large drawn seal with a grade, a year ribbon, a serial and the lab and programme set round it on a text path, with four numbered hairline leaders to an ordered list that explains each mark.
Installation
Overview
An annotated seal for Vue with Ark UI. A framed figure draws one test-lab seal in SVG: a scalloped edge, two rings with the lab and the programme set round them on a text path, a grade in the middle, the year on a ribbon and a serial under it. Four numbered chips on hairline leaders point at the ring, the grade, the year and the serial, and an ordered list beside the seal says the same four things in words, with the facts counted from the test run: the grade follows from the cases passed and the seal's last day from the test day. On a phone the leaders and chips go and the seal stands alone above the list. The page's rails and top rule come from the Guides spine. Vellumby, the Harborcroft Guild, the product and the serial are made up for the example.
FAQ
How do I change what the seal says?
The test run sits at the top of the file: CASES, PASSED, TESTED_ON, VALID_MONTHS and SERIAL. The grade comes from gradeOf (A at 95% or more of cases passed, B at 85%, C at 70%, otherwise D), the ribbon year from TESTED_ON, and the last day from the test day plus VALID_MONTHS. The list text in LEADERS reads those values, so the seal, the list and the dates always agree.
How is the text set round the ring?
RING_TEXT runs along a circle drawn in the same SVG (an SVG text path) and is stretched to fill it, so a longer or shorter name still closes the ring. The path has a fixed id, vellumby-seal-ring; if you put two seals on one page, give each its own id.
Can I move a leader?
Each entry in LEADERS has the dot on the seal (dotX, dotY) and the chip's centre (chipX, chipY), both in a 480 by 300 box that holds the seal in its middle 300 by 300. The line and the chip are both drawn from those numbers, so changing one entry moves both ends.
What do screen readers get?
The whole drawing, the ring text, the grade, the ribbon and the serial overlay are hidden from assistive technology, and the numbered list carries everything they show. The list is named "How to read the seal", each mark is a heading with a sentence, and the test and last days are real time elements.
Is this a real seal?
No. The lab, the guild and the serial are made up, and the seal is drawn by the block, not copied from any testing body. If you show a real seal, use its official artwork only if its rules allow it, and keep the explanation in text.
How does it fit on a phone?
Below md the seal stands alone at 256 pixels with its grade, ribbon year and serial, the chips and leaders are hidden, and the list sits under it with its own numbers. From md the figure widens and the leaders appear; from lg the figure moves to the end beside the list. In a right-to-left layout the drawing stays as drawn, because a seal is symmetric artwork.