# Card skeleton

Card skeleton: a free component, built on your design tokens, to use for a grid of cards with photos (stays, products, posts) that loads after the page. A grid of cards that holds each photo, title, detail and price in place while it loads, so the grid never jumps when they arrive.

Prompt: Add the OpenDesigner component skeleton-card to this project: https://opendesigner.dev/library/skeleton-card.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: loading, loaded, reduced motion.

Accessibility: While loading, the content area is aria-busy and inert, so nobody can tab into placeholders; a polite status says when loading starts and when it is done. Under reduced motion the bones stay still.

File: https://opendesigner.dev/library/skeleton-card.html

Catalog entry (parts, data limits, states, tokens): https://opendesigner.dev/library/skeleton-card.json

Download: `curl -fsSLo skeleton-card.html https://opendesigner.dev/library/skeleton-card.html`