Card

Open any shopping, food delivery or news app and you’ll see a wall of little boxes: a photo, a name, a price, a heart. Each box is a card. You scroll past hundreds of them a day without thinking about it.

For a tester, every card is a tiny screen of its own. It mixes data (names, prices, ratings), images that can be missing, badges like “Sold out”, and several things you can tap. That mix is where the bugs live.

What is a card?

A card is a container that groups everything about one item and is usually a doorway to more detail. Tap the card and you land on the product, restaurant or article page.

You’ll usually see cards used for:

• Collections of similar things: products in a shop, restaurants in a delivery app, hotels in a travel app.
• Feeds: news articles, workouts, social posts, recommendations.
• Summaries: “Your run today”, “This month’s spending”, an upcoming flight.

Cards almost never appear alone. They sit in lists, grids and carousels, so a lot of card testing is really testing how many cards behave together.

Anatomy

How it differs from similar components

Component	What it holds	Typical use
Card	Rich, mixed content about one item (media, text, actions)	Products, restaurants, articles, summaries
List row	One line or two of text, maybe an icon	Settings, contacts, emails
Tile	Mostly an image or icon with a short label	Photo galleries, app launchers, categories
Banner	A message across the full width	Promotions, warnings, “You’re offline”
ModalModalA window that appears on top of the page and blocks the content behind it until it is closed.Open in glossary →	Content that blocks the screen	Decisions, forms, confirmations

Dev note

Material Design (Android) has an official card component in three styles: elevated, filled and outlined. iOS has no system “card” control. Apps build cards from views, often in the style of the App Store’s Today tab. On the web, it’s just a styled div or article, so every site invents its own. Teams may also say tile or content card.

Designs & variants

Material’s three card types differ only in how the card’s edge is drawn: a shadow, a fill color or a border. The rest are content patterns you’ll meet in real products. Switch the demo screens to dark mode as you look.

Switch the demo screens to dark mode and see which card edges survive.

Demo screens: Light

R

Morning run

Today · 6.2 km · 31:40

Your fastest 5 km this month. Keep the streak going!

ShareView

R

Morning run

Today · 6.2 km · 31:40

Your fastest 5 km this month. Keep the streak going!

ShareView

R

Morning run

Today · 6.2 km · 31:40

Your fastest 5 km this month. Keep the streak going!

ShareView

Weekend guide

5 easy hikes near Zürich

Trails · 4 min readRead

-25%

Trail Rain Jacket

4.6 (182)

€89.00, was€119.00Add to cart

Napoli Pizza Corner

4.5 (860) · Pizza · €

25–35 min €2.49

Closed · Opens 17:00

Napoli Pizza Corner

4.5 (860) · Pizza · €

25–35 min €2.49

Tech Daily

Why your phone battery drains faster in the cold, and what actually helps

2 h ago · 6 min read

Tech Daily

Why your phone battery drains faster in the cold, and what actually helps

2 h ago · 6 min read

Images: ratio, cropping and missing photos

Images cause more card bugs than anything else. Things to know:

• Fix the aspect ratio. Product grids usually use 1:1 or 4:5, restaurant and article cards 16:9 or 4:3. If every photo keeps its own shape, the grid jumps around and the layout shifts while images load.
• Crop, don’t squash. Photos should be cropped to fit, never stretched. A stretched shoe looks like a canoe.
  Dev note

  On the web that’s object-fit: cover.
• Plan for missing images. A photo can be missing, slow or broken. A good card reserves the space and shows a neutral placeholder. A bad one shows a broken-image icon, a file name, or collapses to half its height.
• Text on photos (like a “Closed” label or a headline) needs a dark overlay so it stays readable on light and busy images.

Prices, badges and status

Product and restaurant cards repeat data from the detail page, so they can disagree with it.

• Sale price: the new price is lower and highlighted, the old price is higher and struck through, and the “-25%” badge matches the math: (119 − 89) / 119 ≈ 25%.
• Sold out / Closed: the badge, the button and the detail page must all agree. “Sold out” with a working Add to cart is a classic bug.
• Currency and format: “€89.00” on the card but “89,00 €” on the detail page is a localizationLocalizationAdapting an app to a language and region, including translations, dates, currency and layout.Open in glossary → inconsistency.

Loading: skeletons

While data loads, good apps show skeleton cards: grey shapes with the same size and layout as the real cards. The page doesn’t jump when content arrives, and users see that something is happening.

A skeleton that’s a different size from the real card, or one that never goes away when there’s no data, is a bug. More on that in Empty & error states.

Whole-card tap vs action buttons

This is the most important card behavior to test. Users expect tapping anywhere on the card to open the item. But many cards also have their own buttons: a heart, Add to cart, a menu. Now the card has nested tap targets, and three things can go wrong:

1. One tap, two actions. You tap the heart, and the product page opens too, because the tap “bubbles up” from the heart to the card.
2. Screen reader noise. If the whole card is one link, a screen reader reads every word in it as one long link. If every part is its own link, users hear the same destination three times.
3. Invalid markup (web). A <button> inside an <a> is not allowed in HTML, and browsers and screen readers handle it unpredictably.

The fix most design systems recommend is one link per card: only the title is a real link, but its clickable area is stretched over the whole card. The secondary buttons sit on top of it as separate targets. Try all three versions:

Whole card is a link Every part is a link One link per card

-25%

Trail Rain Jacket

4.6 (182)€89.00, was€119.00Add to cart

Tap the heart, the photo, the title and Add to cart. Try Tab too.

The entire card is one big clickable element with the heart and Add to cart inside it. A tap on the heart also "bubbles up" to the card, so the product page opens too. In HTML, a button inside a link is even invalid.

What happened on tap

• Nothing yet…

Screen reader, swiping through the card · 3 stops

1. 1."Trail Rain Jacket, 4.6 stars, 182 reviews, €89.00, €119.00, -25%, Add to cart, link"
2. 2."button" (the heart has no label)
3. 3."Add to cart, button"

When to use it

Cards are a good choice when:

• Items have different kinds of content (photo, title, price, rating) that belong together.
• Users browse and compare, like scrolling restaurants or products.
• Each item leads to a detail page.
• The layout needs to reflow: a grid of cards can show 1 column on a phone and 4 on a desktop.

Good and bad uses

Also avoid cards when the content is a table (comparing many numbers side by side), when there’s only one item, or when users need to read long text. A card is a preview, not the article itself.

Common bugs

#	Bug	What you see	Typical severity
1	Action also opens the card	Tapping the heart, Add to cart or ⋮ also navigates to the detail page	Medium–High
2	Long text breaks the layout	Names overlap the price, push the button out, or are cut mid-word without ”…”	Medium
3	Missing image not handled	Broken-image icon, file name or alt text visible, card collapses	Medium
4	Wrong or inconsistent price	Old price lower than new, wrong % badge, card and detail page disagree	High
5	Status ignored	“Sold out” or “Closed” card still lets you order	High
6	Uneven grid	Cards in one row have different heights, buttons don’t line up	Low
7	Layout shift while loading	Images pop in and push content down, skeleton has a different size	Low–Medium
8	Wrong card opens	Tapping card 3 opens product 4, often after filtering or scrolling	High
9	Invisible in dark mode	Card edge or text disappears; shadow doesn’t show on black	Medium
10	Screen reader noise	Every fragment read separately, duplicate links, unlabeled “button”	High (for affected users)

Stress-test it

A card that looks perfect with the designer’s sample data often falls apart with real data. Long product names are already on. Now remove the clamp, then turn off equal heights, remove a photo, turn off the fixed ratio and switch to 3 columns, and watch the grid get ragged:

Hiking gear · 4 items

-25%

Trailblazer Waterproof Insulated Rain Jacket with Detachable Hood, Taped Seams and Reflective Trim, Unisex

4.6 (182)

€89.00, was€119.00Add to cart

Summit Backpack 30 L

4.8 (96)

€74.50Add to cart

Sold out

Ridge Mid Gore-Tex Waterproof Hiking Boots for Rocky Trails and Muddy Paths, Wide Fit, Vibram Sole

4.4 (311)

€139.00Sold out

-20%

Basecamp Dome Tent for Two People, Three-Season, Easy Setup in 5 Minutes

4.7 (58)

€199.00, was€249.00Add to cart

Columns

123

• Long product namesReal catalogs mix short names with ones like "Ridge Mid Gore-Tex Waterproof Hiking Boots for Rocky Trails and Muddy Paths, Wide Fit".
• Clamp titles to 2 linesWithout a clamp, long names push the price and button down and the grid gets ragged.
• Missing imageThe backpack has no photo. A good card keeps its shape and shows a neutral placeholder.
• Fixed image ratio (1:1)Without it, every photo keeps its own shape and the cards jump around.
• Equal card heightsCards in a row stretch to the same height and the buttons line up at the bottom.
• Dark modeShadows vanish on dark backgrounds, so dark cards need a lighter surface or a subtle border.

Reload (skeleton) Reset

Find the bug

This outdoor shop’s product grid has six bugs. Explore it like a tester:

• Tap the heart on a few products.
• Compare the cards with each other, and with the product pages.
• Try to buy something that’s sold out.
• Turn on VoiceOver and swipe through the first two cards.

🐞 Bug hunt: Product grid

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

Hiking gear

-25%

Trail Rain Jacket

4.6 (182)

€89.00€119.00

Add to cart

backpack_30l.jpg

Summit Backpack 30 L

4.8 (96)

€74.50

Add to cart

Sold out

Ridge Mid Gore-Tex Waterproof Hiking Boots, Wide Fit

4.4 (311)

€139.00

Add to cart

-20%

Dome Tent 2P

4.7 (58)

€249.00€199.00

Add to cart

Peak GPS Watch

4.5 (141)

€249.00

Add to cart

Alpine Fleece

4.2 (77)

€59.99

Add to cart

Device settings

Restart app

VoiceOverSwipe right

In bag: nothing yet

1. 1

   Hint: Tap the heart on any card.

   Tapping the heart also opens the product

   The favorite is saved, but the product page opens at the same time. The tap on the heart bubbles up to the clickable card. Expected: the heart only toggles the favorite, and the user stays on the grid.

   Reveal answer✓ I found this
2. 2

   Hint: Look at the hiking boots card.

   Long product name overlaps the price

   The name needs four lines but the title box is only two lines tall and doesn't clip, so the text runs over the rating and price. Expected: the title is clamped to two lines with "…" (or the card grows), and nothing overlaps.

   Reveal answer✓ I found this
3. 3

   Hint: Look at the backpack.

   Missing photo shows a broken icon and collapses the card

   Instead of a photo you see a tiny broken-image icon and the file name backpack_30l.jpg, and the card is much shorter than its neighbor. Expected: the image area keeps its size and shows a neutral placeholder.

   Reveal answer✓ I found this
4. 4

   Hint: Read the tent's prices carefully, then open it.

   Sale price is higher than the old price

   The card shows €249.00 with €199.00 struck through and "-20%". The prices are swapped: the product page says €199.00. Expected: the current (lower) price is highlighted, the old (higher) price is struck through, and the card matches the detail page.

   Reveal answer✓ I found this
5. 5

   Hint: Tap Add to cart on the boots, then check the bag.

   Sold out product can be added to the bag

   The boots show a "Sold out" badge, and the product page has no Add button, but the card's Add to cart still works and the bag count goes up. Expected: the card button is disabled or replaced with "Sold out", like on the detail page.

   Reveal answer✓ I found this
6. 6

   Hint: Turn on VoiceOver and swipe through the first card.

   Screen reader reads every fragment and duplicate links

   It takes 10 swipes per card: the photo is read as a file name, the heart is just "button", the rating is split into "4.6" and "(182)", the old price has no "was", and the same product link is announced twice. Expected: one link per card with the product name, a labeled favorite toggle, and the price read as one phrase.

   Reveal answer✓ I found this

How to test it

Checklist

Card test checklist

0 of 13 checked

Copy

• Tapping the card (title, image, empty area) opens the correct item
• Each action on the card (heart, Add to cart, menu) does only its own job and does not open the card
• Card data matches the detail page: name, price, rating, status
• Sale price is lower than the old price, and the % badge matches the math
• Sold out / Closed cards cannot be ordered from the card or the detail page
• Long titles clamp or wrap cleanly and never overlap other content
• Missing or slow images show a placeholder with the same size; no broken icons or file names
• Images use a consistent aspect ratio and are cropped, not stretched
• Skeleton cards match the real card size, and disappear when loading ends
• Grid adapts to phone, tablet and desktop widths; rows line up
• Cards are readable in dark mode and at the largest text size
• Screen reader: one link per card with a clear name; buttons are labeled; prices read as one phrase
• Web: Tab reaches each card once plus its buttons, with a visible focus ring

Example test cases

Accessibility

• One link per card. Make the title the link, and extend its clickable area over the card. Don’t wrap the entire card, buttons and all, in one link.
• Label icon buttons. The heart needs a name like “Save Trail Rain Jacket to favorites” and a pressed/selected state. Just “button” or “heart” is useless in a list of 40 hearts.
• Decorative images get empty alt textAlt textA text description of an image that screen readers read aloud.Open in glossary →. If the title already names the product, the photo should be skipped (alt=""), not read as “IMG_4021.jpg”. If the image adds information (a color, a map), describe it.
• Prices read as one phrase. Struck-through text isn’t announced as “old price” by most screen readers, so add hidden text like “was €119.00”.
• Group the card. On iOS and Android, related text can be grouped so the screen reader reads “Trail Rain Jacket, 4.6 stars, €89.00” in one stop instead of six.
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: buttons on cards need at least 44×44 pt (iOS) / 48×48 dp (Android), with enough space between them so a tap on the heart doesn’t hit the card.
• Contrast: text on photos and badges needs 4.5:1. In dark modeDark modeA display setting that uses light text on dark backgrounds.Open in glossary →, the card edge must still be visible (a lighter surface or a border, since shadows don’t show on black).
• Keyboard (web): each card should be one Tab stop plus its buttons, in a logical focus orderFocus orderThe order in which the Tab key moves through interactive elements.Open in glossary →, with a visible focus ring around the whole card.

Mobile vs web

iOSAndroidWeb

• No native card component, so behavior varies by app.
  Dev note

  Cards are built with SwiftUI views or UICollectionView cells.
• Tapping often shows a highlight or press animation; long-press may open a context menu with a preview. Test both.
• Test with Dynamic Type at the largest sizes: does the card grow, or does text get cut?
• VoiceOver: check that card content is grouped and the image isn’t read as a file name.

• Material 3 Card component: elevated, filled or outlined. Cards in a grid often reflow by window size classWindow size classAndroid's width buckets (compact, medium, expanded) used to choose a layout.Open in glossary → on tablets and foldables.
• Pressed cards show a ripple. A ripple on the whole card when you tap the heart is a hint that both got the tap.
• Test with font scale and display size changes, and with TalkBack.
• Rotate the device: do columns change correctly, and does the scroll position survive?

• Cards are custom HTML, usually an article with a link inside. Inspect the markup in DevToolsDevToolsDeveloper tools built into browsers for inspecting pages, network traffic and errors.Open in glossary →: look for <button> inside <a> or several links to the same URL.
• Check hover states and that the cursor is a pointer over the whole card.
• Use responsive mode (Responsive design testing) to check 1, 2, 3 and 4 columns, and that cards never overflow the viewport.
• Watch for layout shift while images load (Lighthouse reports it as CLS), and check images are lazy-loadedLazy loadingLoading images or content only when the user scrolls near them.Open in glossary → below the fold.
• Middle-click / Cmd+click on a card should open it in a new tab, which only works if it’s a real link.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.You tap the heart on a product card. The heart fills AND the product page opens. What is the most likely cause?

   AA slow networkBThe tap bubbles up from the heart to the clickable cardCThe image failed to loadDA dark mode bug

2. 2.A card shows "€249.00" highlighted, "€199.00" struck through and "-20%". What do you report?

   ANothing, it's a saleBPrices are swapped: the old price must be higher than the new oneCThe badge color is wrong

3. 3.What is the recommended way to make a whole card tappable without breaking its buttons?

   AWrap the entire card, buttons included, in one linkBMake the image, title and a View button all separate linksCMake the title the only link and stretch its click area over the card, with buttons on top

4. 4.A product has no photo. What should the card show?

   AA neutral placeholder of the same sizeBThe browser's broken-image iconCNothing, the card can be shorterDThe image file name

5. 5.Which test data is MOST likely to reveal a card layout bug?

   AA product called "Hat"BA 70-character product name on a narrow phone with large textCA product with a normal price

Key takeaways

• A card groups media, title, supporting text, metadata and actions about one item, and usually opens a detail page.
• Test every tap target separately: the card itself, the heart, the button, the menu. One tap must do one thing.
• Use the one link per card pattern as your expected behavior for screen readers and keyboards.
• Feed cards real, ugly data: long names, missing images, sale prices, sold-out items, and compare them with the detail page.
• Check the grid as a whole: equal heights, fixed image ratios, skeletons while loading, dark mode and every screen width.