\u201cA card is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.\u201d<\/i><\/p>\n
You can think of each card as a content container with a clear border. This conveys each card as a distinct element, signalling to the user that all the information contained within that border is related\u2014and should be perceived as such.<\/p>\n
What should a UI card include?<\/h2>\n
A UI card typically contains:<\/p>\n
- \n
- An image<\/li>\n
- A heading (and, if necessary, a subheading)<\/li>\n
- A short description<\/li>\n
- A call-to-action<\/li>\n<\/ul>\n
UI cards are clickable, providing the user with a snapshot summary and inviting them to click on their chosen card to expand on a particular piece of content. As such, UI cards are a doorway to further information\u2014usually housed on a separate page or screen.<\/p>\n
UI card design examples<\/h2>\n
Once you know what card design is, you\u2019ll start to notice it in many of your favourite digital products and services. Here are some real-world examples of UI card design that you may already be familiar with.<\/p>\n
ITVX online streaming platform<\/h3>\n
Consider the home screen for ITVX, a British streaming service. Each show is contained within its own card, and if you click on a card, it expands to provide more information about that particular program.<\/p>\n
Click the play button (that all-important call-to-action) and you\u2019ll be taken to a new screen to stream your chosen show.<\/p>\n
![\"Screenshot](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2026-08-21-at-15.29.38.png\" "\\"\\"")
<\/p>\nThis type of card design is found across most streaming services. Keep an eye out next time you\u2019re using platforms like Netflix, Disney+, and similar.<\/p>\n
The Google Health app (formerly Fitbit)<\/h3>\n
The Google Health mobile app is another great example of card design in action. Each card represents a different data point on the dashboard: sleep duration, heart rate, daily step count, and so on. Click on a card and you\u2019ll be taken to another screen with a more detailed breakdown of the data.<\/p>\n
And, what\u2019s exciting about this type of card design is that it\u2019s customisable. You can choose which cards you want to see on your dashboard and move them around to suit you. So, rather than everyone seeing the same set of cards in the same order, you can put the information you care about most front and centre.<\/p>\n
This is also where cards start to get especially interesting in the age of AI. As apps become more personalised, cards offer a simple way to show different users different information, without completely redesigning the interface each time.<\/p>\n
![\"Two](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2026-08-21-at-15.31.30.png\" "\\"\\"")
<\/p>\nUI card design in Generative AI (e.g. Gemini and Perplexity)<\/h3>\n
Card design is also popping up more and more in generative AI. Instead of responding with large blocks of text, tools like Gemini and Perplexity are becoming much more visual in how they present information.<\/p>\n
Cards are especially useful when an AI tool has lots of information to share.<\/p>\n
Imagine asking Gemini \u201cWhere should I stay in Lisbon?\u201d A long paragraph describing five different hotels or neighbourhoods would be pretty cumbersome. Five separate cards for each hotel, on the other hand, makes the information much easier to scan and compare.<\/p>\n
![\"Google](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2026-08-21-at-15.32.55.png\" "\\"\\"")
<\/p>\nAnd that\u2019s where cards really come into their own. Instead of burying recommendations in a wall of text, AI tools can break them up into clear, visual chunks. You can quickly see what catches your eye and click through to explore anything you\u2019re interested in.<\/p>\n
As generative AI becomes more visual and interactive, we\u2019re likely to see cards play an even bigger role in how these tools organise and present information.<\/p>\n
Cards are just one of many interaction patterns you might use when designing for AI. For a deeper dive, check out this practical guide to designing experiences for AI agents<\/a>.<\/p>\n
Card design in AI-powered search<\/h3>\n
Google Search is another great example of how card design is evolving alongside AI.<\/p>\n
Search results have used cards in one form or another for years. Search for a restaurant, product, or local business, for example, and Google can pull key information into its own clearly-defined section, so you don\u2019t have to click through several websites to find what you need.<\/p>\n
Now, cards are taking on an even bigger role as Google brings generative AI into the search experience.<\/p>\n
In AI Mode, Google can combine a generated response with visual cards for relevant products, places and websites. So, instead of getting a long AI-generated answer and a separate list of traditional search results, you can explore different types of information within the same experience.<\/p>\n
![\"Google](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2026-08-21-at-15.34.17.png\" "\\"\\"")
<\/p>\nThis is another reason cards work so well for AI-powered interfaces. They help break up large amounts of information and give you clear places to click, explore and keep searching.<\/p>\n
Want to learn more about designing AI interfaces that users feel confident interacting with? Explore these 7 best practices for designing trustworthy AI experiences<\/a>.<\/p>\n
When to use UI cards<\/h2>\n
Card design is ideal when you want to present heterogeneous content items\u2014that is, many different types of content\u2014on one page or screen.<\/p>\n
Think of a dashboard that displays various data in different formats; say, bar charts, line graphs, pie charts, and percentages. Cards are a great way to separate each content type into its own distinct container, giving the user a clear overview of all key information on the page.<\/p>\n
Card design also works best in contexts where the user is browsing rather than searching. When you log onto Netflix, for example, and don\u2019t know what you want to watch, it\u2019s useful to have a series of cards that you can scan through to find something you\u2019re interested in. If you\u2019re searching for something specific, on the other hand, you\u2019d probably want the results presented in list format.<\/p>\n
Card design is a popular choice for:<\/p>\n
- \n
- Social media feeds.<\/b> Think of sites like X and LinkedIn, where each individual user post is presented within its own distinct container.<\/li>\n
- E-commerce sites.<\/b> Card design is useful for showcasing individual products\u2014think of sites like Etsy and ASOS.<\/li>\n
- Blogs and online magazines,<\/b> where each card represents a different article.<\/li>\n
- Analytics dashboards.<\/b> Many analytics platforms use card design to present different data points in a variety of formats.<\/li>\n
- Project management tools.<\/b> If you\u2019ve ever used a tool like Asana or Trello, you\u2019ll be familiar with the \u201cBoard\u201d view where each project or task is represented by a UI card. You can then drag and drop these cards to categorise them.<\/li>\n
- Dating apps.<\/b> Swipe through apps like Bumble and Tinder and you\u2019ll find individual UI cards to represent different user profiles. Click on a UI card and you can learn more about a potential match.<\/li>\n<\/ul>\n
Now we know what card design is and when to use it, let\u2019s delve deeper into the benefits.<\/p>\n
The benefits of card design in UI<\/h2>\n
There are several benefits of using card design for your UI:<\/p>\n
- \n
- UI cards are versatile. <\/b>They can be used for many different content types, and they work well for a variety of digital products\u2014from weather apps to accounting software to dating platforms, and many more.<\/li>\n
- Card design is conducive to responsive design.<\/b> UI cards are easily scalable and can adapt to different devices, screen sizes, and page orientations\u2014ensuring a seamless user experience no matter what.<\/li>\n
- UI cards are scannable.<\/b> People don\u2019t want to be overwhelmed with dense blocks of information; they want bite-size snippets that are easy to scan and digest. With UI cards, you can present many different types of content on one page or screen without sending your users into cognitive overload. That\u2019s crucial for providing a positive user experience!<\/li>\n
- Card design helps with consistency.<\/b> Even if you\u2019re displaying lots of different content types on one screen, UI cards will ensure that your interface is visually coherent. This creates a predictable user experience, enhancing the usability of your interface.<\/li>\n
- UI cards are great for creating a clean, clutter-free aesthetic.<\/b> Card design organises your content into neat containers, bringing structure to the page and creating interfaces that are visually pleasing.<\/li>\n<\/ul>\n
How to design UI cards: a step-by-step guide<\/h2>\n
Want to incorporate UI cards into your next design project? Here\u2019s a step-by-step guide to get you started.<\/p>\n
1. Define the content<\/h3>\n
Consider the purpose of your UI cards. What kind of content will they present? This will help you determine what elements to include in your cards, and how much real estate to allocate to each.<\/p>\n
If you\u2019re designing UI cards to display user profiles on a dating app, for example, you may want most of the card to be taken up with a photo. If you\u2019re designing UI cards for blog articles, on the other hand, you might opt for a smaller thumbnail image and more text.<\/p>\n
2. Sketch the layout<\/h3>\n
With pencil and paper (or a simple wireframing tool<\/a>), sketch the basic layout for your UI cards. Think about where each element will sit. Will you place the headline at the top with an image beneath, or the other way round? Where will you position the call-to-action? Experiment until you\u2019re happy with the structure.<\/p>\n
3. Design your UI cards<\/h3>\n
You\u2019ve got a basic layout in mind. Now it\u2019s time to design your cards. Open up your chosen design tool\u2014Figma, Sketch, and Adobe XD are all popular choices, or you can find more UX and UI design tools here<\/a>.<\/p>\n
Starting from a blank canvas, design your UI card bit by bit. Use the shape tool to create a square or rectangular container, then add your desired elements such as heading and subheading text, an image, and a call-to-action.<\/p>\n
As you build out the card, think about accessibility. Give each card a clear heading, use descriptive text for buttons and links, and don\u2019t rely on an image alone to communicate important information. If the image adds meaning or context, make sure it has appropriate alt text so people using screen readers aren\u2019t excluded.<\/p>\n
4. Style your cards<\/h3>\n
Next, style your cards to make sure that they\u2019re visually appealing, on-brand, and accessible for the end-user.<\/p>\n
Define your colours, ensuring plenty of contrast between text and the card background, and choose a typeface and font size that are easy to read.<\/p>\n
And remember: colour shouldn\u2019t be the only way you communicate meaning. If a card uses colour to show that something has changed or needs attention, for example, add an icon or text label too. That way, the information doesn\u2019t get lost for users who can\u2019t easily distinguish between certain colours.<\/p>\n
- Card design is conducive to responsive design.<\/b> UI cards are easily scalable and can adapt to different devices, screen sizes, and page orientations\u2014ensuring a seamless user experience no matter what.<\/li>\n
- E-commerce sites.<\/b> Card design is useful for showcasing individual products\u2014think of sites like Etsy and ASOS.<\/li>\n
- Social media feeds.<\/b> Think of sites like X and LinkedIn, where each individual user post is presented within its own distinct container.<\/li>\n