Product Cards

What is a product card?

A product card is a compact tile that represents a single product in an online store. It typically shows a product image, name, price, optional rating and badges such as "New" or "-20%", plus actions like "Add to cart", "Add to wishlist" or "Quick view". Product cards are the building blocks of category pages, search results, related-product rows and homepage carousels.

Best practices for product cards

• Use a consistent image aspect ratio across all cards so the grid looks tidy.
• Show the price prominently; for discounts, display the old price struck through next to the new one.
• Keep titles to two lines and truncate longer names gracefully.
• Limit the number of actions; one primary "Add to cart" button and an icon for the wishlist is usually enough.
• Make the whole card or at least the image and title link to the product page.
• Reveal secondary actions on hover only as an enhancement; touch users must reach them too.

Accessibility and performance

Use a heading for the product name and give the image meaningful alt text. When the old price is shown with <del>, add visually hidden text such as "Original price" and "Sale price", because the strike-through is not announced. Icon-only wishlist buttons need an aria-label and aria-pressed for the saved state. Avoid nesting buttons inside links. Set width and height on images and use loading="lazy" for cards below the fold to keep the page fast and stable.

Bootstrap 6, Bootstrap 5, Tailwind and pure CSS

These product card HTML CSS examples and bootstrap product card snippets come in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions build on the card component, with Bootstrap 6 using theme-* colour roles for badges and buttons. Filter by framework, look at the live preview, then copy the HTML and CSS from the code tabs or download the card and connect the button to your own cart logic.