Credential Badge Kit Awards Block for React

It is one inline SVG in a 64 by 64 box, built from three pieces at the top of the file: SEAL (the scalloped edge, LOBES round bumps on a circle), RING and CHECK. Change LOBES for a different edge, or replace CHECK with your own path. CredentialMark takes a size class and whether to draw the ring: the 32 pixel size drops it so the mark stays clear. The drawing is hidden from assistive technology; the credential's name is in the alternative text of the snippet and in the text beside it.

HTML_SNIPPET and MARKDOWN_SNIPPET are plain strings at the top of the file, and the Copy button copies exactly the text in its box, then says "Copied" to screen readers. Browsers only allow clipboard access on secure pages (HTTPS or localhost); if the clipboard refuses, the button says so instead of failing silently. The box scrolls sideways on a narrow screen and can be focused to scroll it with the keyboard.

Tab moves into the list and the arrow keys switch between HTML and Markdown on every library; Home and End jump to the first and last. Both snippet boxes are the same height, so switching never moves the page.

It is worked out, not typed: VALID_UNTIL is a fixed day and AS_OF is a fixed day the block is read as of. If the first is on or after the second the line reads "Verified" with the days to go; otherwise it reads "Expired". Set AS_OF to today's date in your own page, or compute it where you render, to keep it current.

No. Hallmarq and the Dunegate Standard are made up and nothing here checks anything. The badge is drawn by the block, not copied from any standards body. If you show a real certification, name it in text and use its official badge only if its rules allow it.

The header comes first, then the framed figure with the three sizes side by side, then the embed snippet; thin rules separate the parts. Nothing scrolls sideways at 320 pixels except the code box itself. In a right-to-left layout the split mirrors while the code stays left to right.