Open any news app, shopping site, or dashboard. Chances are the content sits in small boxes. Each box holds a photo, a title, a few words, and maybe a button. These boxes are cards. They are one of the most common patterns in modern UI. Done well, they make content easy to scan and act on. Done badly, they turn a page into a pile of clutter. This guide explains what cards are, how to design them, and which mistakes to avoid.

What Is a Card in UI Design?

A card is a container that groups related information about one item. It usually has a clear edge, such as a border, a shadow, or a background color. Inside, it may hold an image, a heading, a short description, metadata, and one or more actions. Each card stands for a single subject, such as a product, an article, a contact, or a task. Google’s Material Design helped make cards popular, and they are now used across the web and in apps.

Why Card Design Matters

Cards break a large body of content into small, scannable pieces. Users can glance at a card, judge it in a second, and decide whether to open it. This suits how people read online. Cards also adapt well to different screen sizes, since they can sit in a grid on a desktop and stack in a column on a phone. They work well with Gestalt ideas such as common region and proximity, which help users see what belongs together.

When to Use Cards

Cards work best when:

• Each item has mixed content, such as an image, text, and an action.
• Users browse many items and pick one to explore.
• Items are of similar importance and do not need strict comparison.
• The layout must adapt across phones, tablets, and desktops.

Examples include product listings, blog feeds, team pages, dashboards, and file folders.

When Not to Use Cards

Avoid cards when users need to compare many values across items. A table is better for that. Skip cards for long, linear reading, where a plain page flows better. Do not wrap everything in a card just for style. If a screen has cards inside cards inside cards, the structure becomes hard to follow.

Anatomy of a Good Card

Most cards contain a few standard parts:

• Media: A photo, illustration, or icon that gives a quick visual cue.
• Title: A short heading that names the item.
• Supporting text: A line or two of description or metadata, such as price, date, or author.
• Actions: A button, link, or icon for the next step.
• Container: The edge, shadow, or background that holds it all together.

Not every card needs every part. Include only what helps users decide.

Core Principles of Good Card Design

Focus each card on one subject

A card should be about one thing. Mixing several topics inside one card confuses users. If a card needs many sections, it may be better as a full page.

Build a clear hierarchy

Make the title the strongest element after the image. Keep supporting text smaller and calmer. Place the primary action where the eye ends. Strong visual hierarchy lets users scan a card in a glance.

Keep content short

Cards are previews, not articles. Use short titles and one or two lines of text. Trim long text with an ellipsis and let users open the full item. Short content also keeps a grid of cards even and tidy.

Use images with purpose

Good images help users recognize an item fast. Keep the same aspect ratio across cards so the grid stays neat. Compress files so pages load quickly. If a card has no image, use an icon or a color block rather than an empty space. Always add alt text for accessibility.

Make the whole card clickable when it fits

When a card leads to one destination, make the entire surface a link. This gives users a large target and saves effort. If a card has several actions, keep each one clear and separate so users do not tap the wrong one.

Limit the number of actions

One primary action is enough for most cards. Add a secondary action, such as save or share, only when it is useful. Too many buttons crowd the card and compete for attention.

Keep spacing and alignment consistent

Use the same padding inside every card and the same gap between cards. Align text and images to a grid. Even spacing makes a set of cards feel calm and organized, while uneven spacing looks careless.

Card Layouts: Grid, List, and Carousel

Grid layout. Cards sit in rows and columns. This suits visual items such as products and photos, and gives a strong overview.

List layout. Cards stack in a single column. This suits content with more text, such as articles or messages, and works well on phones.

Carousel. Cards sit in a row that scrolls sideways. It saves vertical space and suits featured or related items. Carousels can hide content, so use them for secondary items and show a partial card at the edge to hint that more exists.

Masonry layout. Cards of different heights fit together like bricks. It suits image-heavy feeds but can make scanning order less clear.

Choose the layout based on how users browse and how much text each card holds.

Card States and Interaction

Cards should react to the user. Design clear states:

• Default: The resting look.
• Hover: A light shadow lift or border change for mouse users.
• Focus: A visible outline for keyboard users.
• Pressed: A small change at the moment of tap or click.
• Selected: A strong border or check mark when cards can be chosen.
• Disabled: A faded look when an item is not available.
• Loading: A skeleton card that shows the shape of the content to come.

Keep motion subtle and fast. Small micro-interactions can make cards feel alive without distracting users.

Card Styles: Borders, Shadows, and Backgrounds

Cards need an edge so users see where one ends and the next begins. You can use a thin border, a soft shadow, a background color, or a mix. Light shadows create depth and suit layered designs. Flat designs often use borders or tinted backgrounds. Pick one style and apply it everywhere. Avoid heavy shadows, which feel dated and add weight. Make sure the edge has enough contrast, especially on white backgrounds.

Mobile and Responsive Card Design

On phones, cards usually stack in a single column and take the full width. Keep tap targets large, about 44 by 44 pixels, and leave space between cards. Reduce text and use smaller images so users do not scroll forever. Test how cards behave at each breakpoint, from one column to two to four. Make sure images scale without stretching and titles do not break the layout.

Accessibility Tips

Accessible cards work for keyboard and screen reader users.

• Use proper structure. Give each card a real heading, and use lists for groups of cards.
• Avoid nested links. A card with a clickable surface and several inner links can confuse assistive tools.
• Show clear focus states. Keyboard users must see which card is active.
• Add alt text. Describe images in a short, useful way.
• Keep contrast strong. Text on images or colored backgrounds must be readable.
• Do not rely on color alone. Use text or icons to show status or selection.
• Make touch targets large. This helps users with motor difficulties and everyone on phones.

Real-World Examples

Pinterest. A masonry grid of image cards lets users browse ideas and save what they like.

Airbnb. Listing cards show a photo, title, price, and rating in a tidy, scannable format.

Spotify. Album and playlist cards use cover art, a title, and a short subtitle, with a play button that appears on hover.

Trello. Task cards sit inside columns, showing a title, labels, and assignees, and move by drag and drop.

News sites. Article cards pair a headline, an image, and a short summary so readers can scan many stories fast.

Dashboards. Metric cards show a single number with a label and a small trend, giving a quick snapshot. For more on this, see these SaaS dashboard UX design best practices.

Common Mistakes to Avoid

• Too much content in one card. The card becomes a crowded mini page.
• Inconsistent card sizes and spacing. The grid looks messy.
• Several competing actions. Users do not know where to click.
• Weak hierarchy. Title, text, and metadata all look the same.
• Low-quality or mismatched images. The grid feels uneven and slow to load.
• Cards inside cards. Nested containers confuse the structure.
• No hover, focus, or pressed states. Cards feel flat and unresponsive.
• Tiny tap targets. Mis-taps frustrate mobile users.
• Hiding key information. Price, date, or status buried in small text slows decisions.
• Using cards for everything. Not every piece of content needs a box.
• Ignoring accessibility. Missing alt text, poor contrast, and nested links exclude many users.

How to Test Your Cards

Watch real users browse a set of cards and note where their eyes go first. Ask them to find a specific item and see how fast they succeed. Review analytics for click rates on cards, positions, and actions. Try the squint test by blurring your eyes and checking that the main title or action still stands out. Compare layouts, such as grid versus list, with controlled experiments. Test on phones, with a keyboard only, and with a screen reader. Repeat after changes to content or layout.

Final Thoughts

Cards turn busy content into clear, bite-sized pieces. Keep each one focused on a single subject, build a strong hierarchy, and trim the text. Use images with care, limit actions, and keep spacing even. Design every state, plan a smooth mobile layout, and support all users from the start. Then test with real people and refine. When cards help users scan, choose, and act with ease, the whole product feels lighter and more inviting.