Product cards: what to show and how to keep a catalogue even
What a card consists of, an even row, the key attribute by category, a readable price, two columns on a phone and one badge instead of five — with live examples.
In short
A product card in a catalogue answers four questions in a second: what it is, how much it costs, whether it is available and why this one. It needs a photo in the same ratio as all the others, a title of up to two lines, the attribute people choose by in this category, a large price with the old one next to it during a sale, and stock or delivery. Everything else is optional, and badges are best kept to one. Cards in a row are aligned: the same photo frame, titles cut to two lines, prices on one line. The whole card is a link to the product page, the favourites and cart buttons inside it work on their own, and on a phone the catalogue shows two columns.
What a card consists of
Eight parts, and each answers a question of the buyer. The first six are needed always, the last two — depending on the shop.
- Photo — one ratio for the whole catalogue, 4:5 or 1:1
- One badge — the strongest reason: a discount or “new”
- Favourites — a separate 44 × 44 button
- Title — up to two lines, the rest is cut
- Key attribute — what people choose by in this category
- Price — large, the old one crossed out next to it
- Stock and delivery — answers “when will I get it”
- Action — on a desktop; on a phone the card itself is enough
An even row of cards
The same four products. Switch to order: one photo frame, one background, titles in two lines, prices on one line.
In a mixed row the eye jumps between frames and backgrounds and compares the photos instead of the products. In an even row it slides along the prices and stops on the product it needs. The order is set once — in the photo requirements and in the card styles — and then holds for any number of products.
The key attribute depends on the category
One line under the title — what people compare products by before opening them.
| Category | People choose by | On the card |
|---|---|---|
| Furniture | size and material | dimensions in cm, material |
| Clothes | size and colour | sizes in stock, colour dots |
| Electronics | one main spec | memory, power or screen size |
| Groceries | weight and price per kilo | weight and price per kilo next to the price |
| Cosmetics | volume and purpose | volume in ml, skin or hair type |
| Building materials | price per unit | price per m² or per piece |
A price that reads at a glance
Groups of digits, a currency sign, the old price next to the new one and the unit where it matters.
Format
320.00 USD
$320
Discount
SALE!!! 320
$320 $400 −20%
Per unit
18
$18 per sq ft
Options
Price on request
from $250 · 3 sizes
The price is the largest text on the card after the title, with digits of equal width, so prices in a row can be compared. “Price on request” without a reason sends the person to look for the same product elsewhere; if the price depends on options, “from” and the number of options are more honest.
Two columns on a phone
One column shows one and a half products per screen, two columns — four. The catalogue is browsed, so more products in view win.
In a narrow card only the main things stay: photo, title, price and the favourites button. The cart button moves to the product page — the whole card is pressed anyway. One column is left for goods where the photo decides everything: art, interiors, lookbooks.
One badge, not five
When every card says “Hit”, the word means nothing. A badge works when it is rare.
Choose one, the strongest reason for this product: a discount, a new arrival or the last items. Free delivery and eco materials belong to the filters and the product page, not on top of the photo.
A card in code: 2 examples
Markup where the whole card is a link and the favourites button still works, and styles that keep a row even.
Markup of a card
One link in the title stretches over the card; the button sits on top of it. The old price has a hidden word for screen readers.
<article class="card">
<img class="card__img" src="/img/oak-table-160.webp" width="800" height="1000"
alt="Oak table 160 × 90 cm with oiled top" loading="lazy">
<h3 class="card__title">
<a class="card__link" href="/catalogue/oak-table-160">Oak table 160 × 90</a>
</h3>
<p class="card__meta">Solid oak · oil and wax</p>
<p class="card__price">
<b>$320</b>
<s><span class="visually-hidden">Was </span>$400</s>
</p>
<p class="card__stock">In stock · delivered tomorrow</p>
<button class="card__fav" type="button" aria-pressed="false" aria-label="Save to favourites">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
<path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z"
fill="none" stroke="currentColor" stroke-width="1.75"/>
</svg>
</button>
</article>An even row
One photo frame, titles cut to two lines, prices pushed to the bottom; two columns already on a narrow phone.
/* Two columns from 320px, more on wider screens */
.catalogue {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(9rem, 45%), 1fr));
gap: var(--space-4) var(--space-3);
}
.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
/* One frame for every photo, whatever was uploaded */
.card__img {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
background: var(--color-surface-muted);
}
/* Titles take at most two lines */
.card__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/* The whole card is clickable */
.card__link::after {
content: "";
position: absolute;
inset: 0;
}
/* Prices on one line across the row */
.card__price {
margin-top: auto;
font-variant-numeric: tabular-nums;
}
/* The button lies on top of the stretched link */
.card__fav {
position: absolute;
top: var(--space-2);
right: var(--space-2);
z-index: 1;
width: 2.75rem;
height: 2.75rem;
}7 rules for product cards
-
01
One photo ratio
The same frame and background for the whole catalogue, set in the photo requirements.
-
02
Two lines of title
The rest is cut on the card and shown in full on the product page.
-
03
Prices on one line
The eye compares prices along the row, not up and down.
-
04
The attribute people choose by
Size for furniture, weight for groceries, sizes in stock for clothes.
-
05
One badge
The strongest reason for this product — or none at all.
-
06
The whole card is a link
People press the photo; buttons inside work on their own.
-
07
Two columns on a phone
Four products per screen instead of one and a half.
Common mistakes with product cards
-
Photos in different frames
Square, landscape, on white and on a dark background — the row looks like a flea market.
-
A badge parade
Five labels cover the product and say nothing.
-
A price without digit groups
“24000” is read slower than “24 000” and is easy to mistake for 2400.
-
Only the button is clickable
People press the photo and nothing happens.
-
The important part only on hover
Phones have no hover: a price or a size hidden there is not seen.
-
“Price on request” without a reason
The person leaves to find the price in another shop.
Questions about product cards
What photo ratio is best for product cards?
Square or 4:5 for most goods, a taller frame for clothes on a model. The main thing is one ratio for the whole catalogue.
Does a card need an “Add to cart” button?
For goods bought without choosing options — yes. If there are sizes or colours, the button opens the choice or leads to the product page.
How many columns should a catalogue have on a phone?
Two for most shops. One — when the photo decides everything: art, interiors, outfits.
Should a second photo appear on hover?
On a desktop it helps, as an extra. Nothing important should depend on it: phones have no hover.
Should ratings be shown on cards?
Only real ones, from your own reviews, with the number of reviews next to the stars.
What to do with long product titles?
Put the words people search by first, cut the card title to two lines and show the full name on the product page.
Online form
A catalogue
that sells
I design and build catalogues where cards are even, prices are readable and the right product is found in seconds. Tell me about the shop — I answer within one working day.