Browser Chrome Card Grid Features Block for React

Each card is one Template with a name, a kind, a path, a sentence and a page skeleton as its child. The skeletons are small components at the top of the file (PricingPage, BlogPage…) built from bars and boxes: copy one, reshape it, and put it inside a new Template. Keep the count even so the two columns end together.

Yes. Replace the skeleton with an image and give it className="size-full object-cover object-top". The window around it stays a drawn browser. The window is decorative and hidden from assistive technology, so keep the page's meaning in the caption.

Each card draws its own frame with the Guides item, with its lines extending a little past the corners and + marks on the top two. The cards sit a full 1.5rem apart so the neighbours' lines don't touch, and the grid is inset from the page rails so the overshoot never reaches them.

The cards stack in one column and each page area is a fixed 10rem tall instead of a wide ratio, so six windows stay within about three screens. The skeletons scale to their box. Nothing scrolls sideways at 320 pixels.

The address pill is always left-to-right, as a URL is, and the rest of the window follows the page's direction: the docs sidebar stays on the start side and the bars start from it.

Yes. Every bar, box and control in the skeletons is a token, and the one dark element on each page, its button or highlighted plan, is the foreground colour, so the card reads the same in light and dark and in any preset.