Product Card CSS

How the Product Card Builder works

Product card CSS: image, price and button

The product card is the most repeated component in e-commerce. A category page, search results page or "you may also like" strip is just a grid of them, so small decisions multiply: a card that is 20 pixels too tall pushes a whole row below the fold, and a price that is hard to spot costs clicks on every product. Shoppers scan listings quickly and expect the image, price and key details to be visible without opening the product page.

Anatomy of a product card

The card has a fixed order because shoppers scan it in a fixed order: picture first, then price, then name, then social proof. The generated markup follows that order in the DOM as well as visually, so screen reader users get the same information in a sensible sequence.

The options

Image ratio. Square (1:1) is the default because most product photography is shot square and it tiles cleanly. Portrait (4:5) suits fashion, where garments are tall, and it matches the shape Instagram shows best, so the same shots work on both. Landscape (4:3) suits furniture, electronics and anything wide. object-fit: cover crops photos of other proportions without stretching, and the light grey background shows while a photo loads or if it fails.

Badges. The badge sits in the top-left corner of the image. Sale is red by convention, because a discount is an urgency signal that should stand apart from the brand palette. New and Bestseller use the accent. Choose None to remove the element rather than hide it.

Price and strikethrough. When the Sale badge is active and a "was" price is set, the old price appears in an <s> element after the current one, smaller and faded. For example, the default card shows $64.00 with $89.00 struck through. Many regions regulate "was" prices, and the UK and EU rules generally expect the old price to be a genuine recent selling price, so only fill that field with a real figure.

Star rating. Five inline SVG stars fill or outline according to the rating. The rating is rounded to whole stars, so 4.5 draws five stars and 4.4 draws four, and the label reads "Rated 5 out of 5" to match what is drawn. Stars use currentColor, so they take the accent colour.

Sizing. Width runs from 220 to 420 pixels as a max-width, so the card shrinks inside a narrower grid column but never grows past your setting. Padding runs 10 to 32 pixels, corner radius 0 to 28, and the button radius is separate so you can pair a rounded card with a square button or a pill button with a square card.

Reading the output

The preview updates as you change any field, and the code panel holds two blocks: the HTML first, then the CSS. The class names all start with product-, so they are unlikely to clash with an existing stylesheet. Paste the HTML once per product, replacing the text, and the CSS once per page. The preview uses a gradient placeholder where your photo goes; the exported <img> has no src, so add yours.

Tips and pitfalls

• Fill in the alt text. The exported image has alt="", which tells screen readers to skip it. That is fine when the product name sits right below, but a short description such as "Grey merino crew-neck sweater" helps shoppers using image search and assistive technology.
• Check button contrast. White text on the default orange accent (#ed8800) is about 2.6:1, below the 4.5:1 WCAG AA needs for normal-size text. Darken the accent or test your own colours in the contrast checker before you ship.
• Keep names short. Cards in a row only line up when the names wrap to the same number of lines. Two lines is a sensible limit; put the full name on the product page.
• Size the photos. A listing page might load 24 to 48 images at once. Serve them at roughly twice the card width for sharp screens and compress them, as covered in how to compress an image for the web.
• In a grid. Drop several cards into a CSS grid with repeat(auto-fill, minmax(240px, 1fr)) and they wrap responsively. The CSS grid generator builds that layout, and the pricing card builder covers subscription plans rather than products.

Related tools