# Product card

Product card: a free component, built on your design tokens, to use in a store or marketplace grid. A card for a digital product or plan add-on: a cover drawn from the tokens, name, one-line description, rating, price with the old price struck out, an Add button and a save toggle.

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

States: added, not added, saved, not saved, hover, pressed, focus.

Accessibility: Add and save are toggle buttons with aria-pressed; the rating and the old price are read as words ("Rated 4.6 out of 5", "was $32"), and the cover is decorative.

File: https://opendesigner.dev/library/r/product-card.html