shadcn.io is not affiliated with official shadcn/ui
Stamped Number Card Grid Features Block for React
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 React with Base 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.
Related
- 010203Pro
Dark Inset Numbered Pillars Features
Card gridsThree numbered pillars on a card in card, each ending in a small drawing: a match bar, a runway sparkline and a stack of approvers.
- 010203Pro
Minimal Outline Card Trio Features
Card gridsThree outline cells with oversized step numerals and an outcome badge at each foot, under a start-aligned header, for an event-planning tool.
- Pro
Numbered Alternating Rows Features
Alternating rowsFour numbered steps for a feedback-triage tool as alternating bands, each with an outlined numeral, a paragraph and a drawing of the step on the other side of a split divider.
- Pro
Sticky Headline Six Point Features
Headline-ledSix engineering principles as automated checks: a sticky header with a live tally of passing checks beside a two-by-three of cells, each with its check line.
- Pro
Compliance Badge Grid Features
Metrics and chartsSix control cards for a privacy-operations tool, each with a coverage ring counted from the data, a sentence of counts and a Passing or open-items badge.
- Pro
Borderless Compact Icon Grid Features
Card gridsA searchable directory of nine capabilities: a search field with a live count marks matches in a borderless 3 by 3 icon grid and quiets the rest, with an empty state when nothing matches.