shadcn.io is not affiliated with official shadcn/ui
Cards Grid Blog Block for Ark UI
The six latest posts of an engineering blog as cards on shared hairlines: drawn greyscale covers, a category, the title as the card's one link, a one-line dek and a byline with the date and reading time.
Installation
Overview
A grid of post cards for React with Ark UI, written for the Kelvane Journal, the engineering blog of a hosted Postgres. A compact header with an outline All posts link sits over six cards that share their hairlines and run from rail to rail, three across on a desktop and two on a tablet, ending the block so the next section's top rule closes the grid. Each card is one link, its title, and the whole card is the target: a drawn greyscale cover, the category as an outline badge, the title, a one-line dek and a byline with the author's initials, the date and the reading time. The covers come from a kit of three kinds, all drawn in your theme's tokens: a small UI drawing of the post's subject (a latency chart, a branch graph), a typographic cover with the post's first words or a numeral, and a line pattern that belongs to the post's category. On a phone the cards become rows with the cover as a thumbnail at the end. It's built from Guides, Badge, Avatar and Button, with CSS for the entrance and the hover. For product blogs, engineering journals, newsrooms and any page that lists its latest writing.
FAQ
How do I add my own posts?
Edit POSTS at the top of the file. Each post has a title, a one-line dek, an author, a category, a date as an ISO string ("2026-09-15"), a reading time in minutes, an href and a cover. Dates are fixed, never computed from today, and are formatted in UTC so the server and the browser print the same day. Initials are taken from the author's first and last names. Six posts fill two rows of three and three rows of two; any count works, because each cell draws its own hairlines.
How do the drawn covers work, and how do I use photos instead?
cover picks one of three kinds. A UI drawing (latency, branches) is a small SVG of the post's subject; a type cover sets the post's display words in large type, or a numeral such as "14B" even larger; a pattern cover draws the line pattern its category owns in PATTERNS, so every Design post looks alike. Every colour is a theme token, so the covers follow light and dark and any preset, and the type is sized in container units, so a cover reads the same on a card and as a phone's thumbnail. To use photos, put an img with object-cover and size-full inside the cover's frame: the frame keeps its aspect, ring and radius.
Why is only the title a link?
One link per card keeps the page short to tab through and gives a screen reader one clear name per post: the title. The link's after: box stretches over the whole card, so a click anywhere on it opens the post, and the keyboard focus ring is drawn on that box around the card. The category, the author and the date are plain text. To add a second link, such as the author's page, give it relative z-10 so it sits above the stretched link. On hover the card tints, the title underlines and the cover zooms in a little; with reduced motion the zoom and the one-time entrance are off.
How does it fit on a phone?
Below sm each card becomes a row: the category and the title at the start with the cover as a small thumbnail at the end, then the dek and the byline across the full width, so all six posts fit in about two and a half screens. From sm the posts are cards with the cover on top, two across, and three across from lg. Bylines are pinned to the foot of each card, so a row's bylines line up. Nothing scrolls sideways at 320 pixels.