shadcn.io is not affiliated with official shadcn/ui
Stamped Number Card Grid Features Block for Solid
Six pillars for an infrastructure kit as a grid of cards with large outlined numerals stamped behind the title, each with its owner and its check in a description list.
Installation
Overview
A stamped-numeral grid for Solid with Ark UI. Under a centred header, six pillar cards sit in a three-by-two, each drawn with lines that overshoot its corners and set apart from its neighbours. A large outlined numeral is stamped behind each title, then come a sentence and a two-row description list: who owns the pillar and how it is checked. The numerals are decoration drawn by a pseudo-element, and the order is in the list. Static, with no tracker: a pillar either exists or it doesn't. It's built from Guides and Data List, with CSS for the entrance and your theme's tokens for every colour. For infrastructure kits, security programmes, handbooks and any set of foundations that each need an owner.
FAQ
How do I change the pillars?
Edit PILLARS at the top of the file: each has a numeral, a title, a description, an owner and a check. The owner and the check are a term and its value in a description list, so a screen reader hears "Owner, Security".
Why does the numeral not count as text?
It is drawn by a pseudo-element from a data-numeral attribute, as an outline with no fill, and hidden from assistive technology. It doesn't need to meet text contrast because it is only decoration. The order is in the cards' list, which is an ordered list.
Why are the cards set apart?
Each card's lines overshoot its corners, which needs room: the cards have gap-8 between them and the grid is inset from the page's rails, or the overshoots would touch the neighbours or sit on the rail.
How does it fit on a phone?
The cards stack one per row, with a smaller numeral; from md they go two across and from lg three. Nothing scrolls sideways at 320 pixels.