Best Practices to Design UI Cards For Your Website

A UI card is a self-contained block that groups related content, an image, a title, a line or two of text, and one clear action, into a single scannable unit. Cards work because people scan and compare rather than read, so grouping content this way lowers the effort of choosing. They earn their place when users are browsing or comparing many similar items: product grids, article feeds, dashboards. They are the wrong tool for a single-message page or long-form reading. Above all, get one thing right: one card, one purpose. A card that tries to do everything does nothing well.

Open Shopee, Netflix or LinkedIn and you are looking at cards. They quietly shape how we browse, compare and decide, which is why they are worth designing with intent rather than assembling out of habit. Get them right and they lower effort. Get them wrong and they add to it.

What Is a UI Card?

A UI card is a modular container that presents related content as one visual unit, usually an image, a heading, a little supporting text and a single action. Its job is to help users understand content quickly and act with confidence.

Good cards share four traits. They are easy to scan for people who skim rather than read. They stand alone, without needing surrounding context. They support one clear intent. And they adapt cleanly across desktop, tablet and mobile. That modularity is what makes them the natural building block for grids, feeds and dashboards, and why our UX design team reaches for them so often.

The strongest card systems share nothing in style. Shopee's dense product grids, Pinterest's masonry feed and Netflix's scrolling rows look nothing alike. What they have in common is clarity, rhythm and intent: every card knows its job, and the grid has a steady beat the eye can follow.

When to Use Cards (and When Not To)

Cards are powerful, not universal. They shine when users are choosing between options, and get in the way when the page has one thing to say.

A quick gut check: if you can picture the content as rows in a spreadsheet that users read top to bottom, a list or a table may serve them better. If each item is a small decision carried by a visual, a photo, a price, a face, cards win.

The Anatomy of a Good Card

An effective card holds only what supports one decision. Everything else is decoration, and decoration is where clarity goes to die.

The parts you actually need:

• A visual anchor: a product photo, thumbnail or icon.
• A title: the primary piece of information.
• A short supporting line: context, not an essay.
• Metadata where it earns its place: price, date, author, category.
• One primary action. Secondary actions, if any, stay visually quiet.

One card, one purpose

Every card should answer a single question: what should the user do next? Stack four competing buttons, Add to Cart, Wishlist, Compare, Quick View, and you have made that question harder, especially on mobile. A product card with one clear Add to Cart beats the same card with four. When in doubt, cut.

Match visual weight to importance

Users scan a card in a predictable order: the image first, then the title, then the price or key detail, then the action. Text-heavy cards tend to be read in an F-pattern, down the left and across the top, a behaviour Nielsen Norman Group documented through eye-tracking. Image-led cards follow a Z, corner to corner. Either way, put the image and title where the eye lands first and the action where it comes to rest. Make the image or title the heaviest element, keep supporting text light, and place the CTA in the same spot on every card in a set. If a user has to decode your hierarchy, it is not doing its job.

How Many Cards Per Row? (Grid Density)

Dense grids trade breathing room for the number of items a user can compare in one view. The right column count depends on the screen and on how much each choice costs the user.

On tightness, there is a floor. Once the gutter drops below about 12px, cards start to visually merge and users misread where one ends and the next begins. Keep a 12-16px gap even in high-density grids, and lean on background contrast, not just spacing, to hold the boundaries as density rises. Increase density when people are scanning many similar items; reduce it when each card is a real decision, because the cost of picking wrong is higher there.

One more density choice is how people move through a long grid. Infinite scroll suits casual discovery, like an image feed with no natural stopping point. Pagination suits results a user may want to return to or bookmark, like search. When you are unsure, a Load more button splits the difference: it keeps users in control without the disorientation of a feed that never ends.

Spacing, Type and Contrast

Three fundamentals do most of the work inside a card. Get them consistent and the whole grid feels considered.

Spacing. Work off a 4pt or 8pt system, keep internal padding identical across every card, and hold consistent gaps in the grid. Inconsistent spacing reads as chaos and makes cards harder to scan.

Type. Headings sit around 18-24px on mobile and 20-28px on desktop, body text at 14-16px and never smaller, buttons at 16px bold. Use a line height of 1.4-1.6, and no more than two or three weights across the set. If you are shrinking text below 14px to fit more in, the card has too much in it.

Contrast. Keep card backgrounds neutral so content leads, and hit at least 4.5:1 contrast on text, the WCAG 2.1 AA minimum. Never lean on colour alone to carry meaning; pair it with an icon or a label.

Image Optimisation and Performance

Images are usually the heaviest element in a card, which makes them the biggest lever on performance. A grid that loads slowly feels broken no matter how polished the design.

• Use one aspect ratio across a set, 1:1, 4:3 or 16:9, so the grid stays even.
• Set explicit width and height, or reserve the space, so images do not shove the layout as they load. That protects your Cumulative Layout Shift score.
• Lazy-load anything below the fold, and serve responsive sizes with srcset so phones are not downloading desktop-sized images.
• Compress hard, and prefer WebP or AVIF with a JPG fallback. Keep each card image well under a couple of hundred kilobytes.

On top of that, cap the first render at a sensible number of cards and load more on scroll, so a long grid does not try to paint hundreds of images at once. There is more in our website speed guide.

Card Patterns by Use Case

Different jobs call for different cards. The essentials shift, but the one-purpose rule never does.

Card States: Hover, Empty and Loading

Cards live in real interfaces, so they need to handle more than the happy path. Three states are easy to forget and costly to skip.

Hover and focus should give a calm, clear signal that a card is interactive: a slight lift or a soft background shift, never a jarring jump.

Empty states matter the moment a filter or search returns nothing. A blank grid reads as broken. A short message with a next step reads as designed.

Loading states set the tone before content arrives. Skeleton placeholders that match the card's real shape make the wait feel shorter and stop the layout jumping as images load.

Designing Accessible Cards

Cards are easy to make quietly inaccessible, so build the basics in from the start rather than bolting them on later.

Keyboard and focus

Make the whole card focusable and clickable, not just a small button, so keyboard and switch users are not forced to hunt for a precise target. Give every interactive element a visible focus ring, a 2-3px high-contrast outline, and keep the tab order logical: left to right, top to bottom.

Screen readers

Use semantic HTML: an article element for the card, a real heading for the title, a button for the action. Write descriptive alt text for images, and give links meaningful text rather than a row of identical Read more labels that mean nothing out of context. For icon-only buttons, add an ARIA label that says what they do.

Touch targets

On touch screens, keep interactive targets to at least 44px, with a little space between them, so people are not mis-tapping the card next door. Small targets are one of the quiet causes of abandoned mobile conversions. The broader accessibility framework, contrast, motion, forms and the rest, lives in our guide to website accessibility.

On mobile, where most traffic now sits, collapse grids to one or two columns, keep tap targets generous, and never simply shrink the desktop card. That is part of wider mobile-first design, not a card-only concern.

Scaling Cards With a Design System

As a product grows, keeping cards consistent by hand stops working. A small design system fixes that: build the card once, then reuse it everywhere.

Start with a base card component, then branch into the variants you genuinely use, product, content, profile and so on. Underneath, define tokens for the things that must stay consistent: spacing, the type scale, colours, and the interaction states from default through hover, focus, active and disabled. Get those right and a new card becomes an afternoon's work, not a fresh argument every time.

Most teams build this in Figma first as a component library, then carry it into production. It is the difference between a grid that stays coherent as it scales and one that quietly drifts out of alignment.

Common Card Mistakes

Most weak card grids fail in the same few ways.

• Overloading the card. Too much content buries the one thing that matters. If you need sub-14px text to fit it, cut content, not size.
• Uneven heights. Wildly different card heights in a row look unfinished. Use a fixed height with truncation, or a proper masonry layout.
• Flat hierarchy. When every element has equal weight, users do not know where to look. Set a clear primary, secondary and tertiary.
• Desktop-first thinking. A desktop grid crushed onto mobile gives you tiny text and un-tappable buttons. Design mobile-first, then scale up.
• Hidden clickability. If the whole card is clickable but nothing signals it, users will not try. Add a clear hover state or an obvious button.
• Copying another platform wholesale. Shopee's grid works for Shopee's content; borrowing it badge for badge rarely fits yours. Start from your content and your users, not a screenshot.

None of these are hard to fix on their own. The discipline is catching them consistently across a grid that keeps growing as the product does.

Frequently Asked Questions

When should I use a card instead of a table or a list?

Use a card when the visual, an image or icon, helps people decide, and when items are browsed rather than precisely compared field by field. Use a table when users need to compare exact values across many attributes, like specs or prices in tight columns, and a simple list when the content is text-only and sequential. Cards trade density for scannability, so pick them when scanning is the point.

How is a card different from a tile or a panel?

The terms overlap, but there is a useful distinction. A card is a self-contained unit of content with its own action, think a product or an article. A tile is usually a simpler, often square shortcut, like an app icon on a launcher. A panel is a container for a region of an interface, such as a settings pane, rather than a single piece of content. If it groups one thing and invites one action, it is a card.

Do card layouts hurt SEO?

Not on their own. Problems arise only when content is hidden behind interactions or the markup is a soup of nested divs. Build cards with semantic HTML, real headings and descriptive link text rather than bare Read more links, and they support good SEO rather than undermine it, because the usability they create tends to move the same signals search engines reward.

Conclusion

If your interface leans on cards, the test is not whether they look modern. It is whether each one earns its place. Before you add another variant, name the single decision it helps a user make, then strip everything that does not serve that decision.

So the useful next step is an audit of the cards you already have. Line them up, and for each one, name the job and the single action. The cards that cannot pass that test are exactly where your clarity is leaking.

That kind of structural clean-up is what our UX design team does across web and mobile every week. If your card-heavy interface has drifted into clutter, book a strategy call and we will help you tighten it.

{{build-better-experience="/directory"}}