{"id":7058,"date":"2026-11-04T08:59:06","date_gmt":"2026-11-04T08:59:06","guid":{"rendered":"https:\/\/www.originux.com\/resources\/?p=7058"},"modified":"2026-11-04T08:59:08","modified_gmt":"2026-11-04T08:59:08","slug":"card-design-best-practices-examples-and-common-mistakes","status":"publish","type":"post","link":"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/","title":{"rendered":"Card Design: Best Practices, Examples and Common Mistakes"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#What_Is_a_Card_in_UI_Design\" >What Is a Card in UI Design?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Why_Card_Design_Matters\" >Why Card Design Matters<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#When_to_Use_Cards\" >When to Use Cards<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#When_Not_to_Use_Cards\" >When Not to Use Cards<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Anatomy_of_a_Good_Card\" >Anatomy of a Good Card<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Core_Principles_of_Good_Card_Design\" >Core Principles of Good Card Design<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Focus_each_card_on_one_subject\" >Focus each card on one subject<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Build_a_clear_hierarchy\" >Build a clear hierarchy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Keep_content_short\" >Keep content short<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Use_images_with_purpose\" >Use images with purpose<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Make_the_whole_card_clickable_when_it_fits\" >Make the whole card clickable when it fits<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Limit_the_number_of_actions\" >Limit the number of actions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Keep_spacing_and_alignment_consistent\" >Keep spacing and alignment consistent<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Card_Layouts_Grid_List_and_Carousel\" >Card Layouts: Grid, List, and Carousel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Card_States_and_Interaction\" >Card States and Interaction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Card_Styles_Borders_Shadows_and_Backgrounds\" >Card Styles: Borders, Shadows, and Backgrounds<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Mobile_and_Responsive_Card_Design\" >Mobile and Responsive Card Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Accessibility_Tips\" >Accessibility Tips<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Real-World_Examples\" >Real-World Examples<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Common_Mistakes_to_Avoid\" >Common Mistakes to Avoid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#How_to_Test_Your_Cards\" >How to Test Your Cards<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#Final_Thoughts\" >Final Thoughts<\/a><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_a_Card_in_UI_Design\"><\/span><strong>What Is a Card in UI Design?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2019s Material Design helped make cards popular, and they are now used across the web and in apps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Card_Design_Matters\"><\/span><strong>Why Card Design Matters<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"When_to_Use_Cards\"><\/span><strong>When to Use Cards<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cards work best when:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Each item has mixed content, such as an image, text, and an action.<\/li>\n\n\n\n<li>Users browse many items and pick one to explore.<\/li>\n\n\n\n<li>Items are of similar importance and do not need strict comparison.<\/li>\n\n\n\n<li>The layout must adapt across phones, tablets, and desktops.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include product listings, blog feeds, team pages, dashboards, and file folders.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"When_Not_to_Use_Cards\"><\/span><strong>When Not to Use Cards<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Anatomy_of_a_Good_Card\"><\/span><strong>Anatomy of a Good Card<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Most cards contain a few standard parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Media:<\/strong> A photo, illustration, or icon that gives a quick visual cue.<\/li>\n\n\n\n<li><strong>Title:<\/strong> A short heading that names the item.<\/li>\n\n\n\n<li><strong>Supporting text:<\/strong> A line or two of description or metadata, such as price, date, or author.<\/li>\n\n\n\n<li><strong>Actions:<\/strong> A button, link, or icon for the next step.<\/li>\n\n\n\n<li><strong>Container:<\/strong> The edge, shadow, or background that holds it all together.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Not every card needs every part. Include only what helps users decide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Core_Principles_of_Good_Card_Design\"><\/span><strong>Core Principles of Good Card Design<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Focus_each_card_on_one_subject\"><\/span>Focus each card on one subject<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Build_a_clear_hierarchy\"><\/span>Build a clear hierarchy<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Keep_content_short\"><\/span>Keep content short<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Use_images_with_purpose\"><\/span>Use images with purpose<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Make_the_whole_card_clickable_when_it_fits\"><\/span>Make the whole card clickable when it fits<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Limit_the_number_of_actions\"><\/span>Limit the number of actions<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Keep_spacing_and_alignment_consistent\"><\/span>Keep spacing and alignment consistent<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Card_Layouts_Grid_List_and_Carousel\"><\/span><strong>Card Layouts: Grid, List, and Carousel<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Grid layout.<\/strong> Cards sit in rows and columns. This suits visual items such as products and photos, and gives a strong overview.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>List layout.<\/strong> Cards stack in a single column. This suits content with more text, such as articles or messages, and works well on phones.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Carousel.<\/strong> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Masonry layout.<\/strong> Cards of different heights fit together like bricks. It suits image-heavy feeds but can make scanning order less clear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Choose the layout based on how users browse and how much text each card holds.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Card_States_and_Interaction\"><\/span><strong>Card States and Interaction<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cards should react to the user. Design clear states:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Default:<\/strong> The resting look.<\/li>\n\n\n\n<li><strong>Hover:<\/strong> A light shadow lift or border change for mouse users.<\/li>\n\n\n\n<li><strong>Focus:<\/strong> A visible outline for keyboard users.<\/li>\n\n\n\n<li><strong>Pressed:<\/strong> A small change at the moment of tap or click.<\/li>\n\n\n\n<li><strong>Selected:<\/strong> A strong border or check mark when cards can be chosen.<\/li>\n\n\n\n<li><strong>Disabled:<\/strong> A faded look when an item is not available.<\/li>\n\n\n\n<li><strong>Loading:<\/strong> A skeleton card that shows the shape of the content to come.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Keep motion subtle and fast. Small <a href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-micro-interactions-definition-and-best-practices\">micro-interactions<\/a> can make cards feel alive without distracting users.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Card_Styles_Borders_Shadows_and_Backgrounds\"><\/span><strong>Card Styles: Borders, Shadows, and Backgrounds<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mobile_and_Responsive_Card_Design\"><\/span><strong>Mobile and Responsive Card Design<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Accessibility_Tips\"><\/span><strong>Accessibility Tips<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Accessible cards work for keyboard and screen reader users.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use proper structure.<\/strong> Give each card a real heading, and use lists for groups of cards.<\/li>\n\n\n\n<li><strong>Avoid nested links.<\/strong> A card with a clickable surface and several inner links can confuse assistive tools.<\/li>\n\n\n\n<li><strong>Show clear focus states.<\/strong> Keyboard users must see which card is active.<\/li>\n\n\n\n<li><strong>Add alt text.<\/strong> Describe images in a short, useful way.<\/li>\n\n\n\n<li><strong>Keep contrast strong.<\/strong> Text on images or colored backgrounds must be readable.<\/li>\n\n\n\n<li><strong>Do not rely on color alone.<\/strong> Use text or icons to show status or selection.<\/li>\n\n\n\n<li><strong>Make touch targets large.<\/strong> This helps users with motor difficulties and everyone on phones.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Real-World_Examples\"><\/span><strong>Real-World Examples<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pinterest.<\/strong> A masonry grid of image cards lets users browse ideas and save what they like.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Airbnb.<\/strong> Listing cards show a photo, title, price, and rating in a tidy, scannable format.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Spotify.<\/strong> Album and playlist cards use cover art, a title, and a short subtitle, with a play button that appears on hover.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Trello.<\/strong> Task cards sit inside columns, showing a title, labels, and assignees, and move by drag and drop.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>News sites.<\/strong> Article cards pair a headline, an image, and a short summary so readers can scan many stories fast.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dashboards.<\/strong> Metric cards show a single number with a label and a small trend, giving a quick snapshot. For more on this, see these <a href=\"https:\/\/www.originux.com\/resources\/blog\/saas-dashboard-ux-design-best-practices\">SaaS dashboard UX design best practices<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_Mistakes_to_Avoid\"><\/span><strong>Common Mistakes to Avoid<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Too much content in one card.<\/strong> The card becomes a crowded mini page.<\/li>\n\n\n\n<li><strong>Inconsistent card sizes and spacing.<\/strong> The grid looks messy.<\/li>\n\n\n\n<li><strong>Several competing actions.<\/strong> Users do not know where to click.<\/li>\n\n\n\n<li><strong>Weak hierarchy.<\/strong> Title, text, and metadata all look the same.<\/li>\n\n\n\n<li><strong>Low-quality or mismatched images.<\/strong> The grid feels uneven and slow to load.<\/li>\n\n\n\n<li><strong>Cards inside cards.<\/strong> Nested containers confuse the structure.<\/li>\n\n\n\n<li><strong>No hover, focus, or pressed states.<\/strong> Cards feel flat and unresponsive.<\/li>\n\n\n\n<li><strong>Tiny tap targets.<\/strong> Mis-taps frustrate mobile users.<\/li>\n\n\n\n<li><strong>Hiding key information.<\/strong> Price, date, or status buried in small text slows decisions.<\/li>\n\n\n\n<li><strong>Using cards for everything.<\/strong> Not every piece of content needs a box.<\/li>\n\n\n\n<li><strong>Ignoring accessibility.<\/strong> Missing alt text, poor contrast, and nested links exclude many users.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Test_Your_Cards\"><\/span><strong>How to Test Your Cards<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span><strong>Final Thoughts<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&hellip; <a class=\"more-link\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/\">Continue reading <span class=\"screen-reader-text\">Card Design: Best Practices, Examples and Common Mistakes<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7058","post","type-post","status-publish","format-standard","hentry","category-blog","entry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Card Design: Best Practices, Examples and Common Mistakes<\/title>\n<meta name=\"description\" content=\"Cards group related content into small, tappable blocks. See how to design card layout, images, text, actions, and states, and how to avoid clutter and weak mobile views.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Card Design: Best Practices, Examples and Common Mistakes\" \/>\n<meta property=\"og:description\" content=\"Cards group related content into small, tappable blocks. See how to design card layout, images, text, actions, and states, and how to avoid clutter and weak mobile views.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/\" \/>\n<meta property=\"og:site_name\" content=\"OriginUX Studio\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-04T08:59:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-04T08:59:08+00:00\" \/>\n<meta name=\"author\" content=\"master.origin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"master.origin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/\"},\"author\":{\"name\":\"master.origin\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\"},\"headline\":\"Card Design: Best Practices, Examples and Common Mistakes\",\"datePublished\":\"2026-11-04T08:59:06+00:00\",\"dateModified\":\"2026-11-04T08:59:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/\"},\"wordCount\":1660,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/\",\"url\":\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/\",\"name\":\"Card Design: Best Practices, Examples and Common Mistakes\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#website\"},\"datePublished\":\"2026-11-04T08:59:06+00:00\",\"dateModified\":\"2026-11-04T08:59:08+00:00\",\"description\":\"Cards group related content into small, tappable blocks. See how to design card layout, images, text, actions, and states, and how to avoid clutter and weak mobile views.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.originux.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Card Design: Best Practices, Examples and Common Mistakes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.originux.com\/resources\/#website\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"name\":\"OriginUX Studio\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.originux.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\",\"name\":\"OriginUX Studio\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"contentUrl\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"width\":120,\"height\":120,\"caption\":\"OriginUX Studio\"},\"image\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\",\"name\":\"master.origin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"caption\":\"master.origin\"},\"sameAs\":[\"https:\/\/www.originux.com\"],\"url\":\"https:\/\/www.originux.com\/resources\/author\/master-origin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Card Design: Best Practices, Examples and Common Mistakes","description":"Cards group related content into small, tappable blocks. See how to design card layout, images, text, actions, and states, and how to avoid clutter and weak mobile views.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/","og_locale":"en_US","og_type":"article","og_title":"Card Design: Best Practices, Examples and Common Mistakes","og_description":"Cards group related content into small, tappable blocks. See how to design card layout, images, text, actions, and states, and how to avoid clutter and weak mobile views.","og_url":"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/","og_site_name":"OriginUX Studio","article_published_time":"2026-11-04T08:59:06+00:00","article_modified_time":"2026-11-04T08:59:08+00:00","author":"master.origin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"master.origin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#article","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/"},"author":{"name":"master.origin","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c"},"headline":"Card Design: Best Practices, Examples and Common Mistakes","datePublished":"2026-11-04T08:59:06+00:00","dateModified":"2026-11-04T08:59:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/"},"wordCount":1660,"commentCount":0,"publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/","url":"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/","name":"Card Design: Best Practices, Examples and Common Mistakes","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/#website"},"datePublished":"2026-11-04T08:59:06+00:00","dateModified":"2026-11-04T08:59:08+00:00","description":"Cards group related content into small, tappable blocks. See how to design card layout, images, text, actions, and states, and how to avoid clutter and weak mobile views.","breadcrumb":{"@id":"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.originux.com\/resources\/blog\/card-design-best-practices-examples-and-common-mistakes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.originux.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Card Design: Best Practices, Examples and Common Mistakes"}]},{"@type":"WebSite","@id":"https:\/\/www.originux.com\/resources\/#website","url":"https:\/\/www.originux.com\/resources\/","name":"OriginUX Studio","description":"","publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.originux.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.originux.com\/resources\/#organization","name":"OriginUX Studio","url":"https:\/\/www.originux.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","contentUrl":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","width":120,"height":120,"caption":"OriginUX Studio"},"image":{"@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c","name":"master.origin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","caption":"master.origin"},"sameAs":["https:\/\/www.originux.com"],"url":"https:\/\/www.originux.com\/resources\/author\/master-origin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/comments?post=7058"}],"version-history":[{"count":1,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7058\/revisions"}],"predecessor-version":[{"id":7059,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7058\/revisions\/7059"}],"wp:attachment":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/media?parent=7058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/categories?post=7058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/tags?post=7058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}