Back to Insights

A beginners guide to card-based UI

Marc Bowers
mockup-of-various-side-navigation-uis-created-by-tran-mau-tri-tam-for-ui8-article

Summary

This blog explores the popularity of card-based UI design patterns and why they are widely used across modern digital products like Netflix and Facebook. It explains what cards are, why they work so effectively - such as their flexibility, familiarity, and ability to structure information - and how they help users quickly scan and understand content. However, it also highlights that cards are not a universal solution and should only be used when they match user needs and context. The blog concludes by emphasising thoughtful, user-centred application of cards rather than defaulting to them.

Let’s talk cards! No, not Christmas cards just yet, we’re afraid. We’re talking about another type of card, although it will still make you smile when used correctly, just like a Christmas card. Cards are one of the most popular UI design patterns. For example, Netflix, Facebook and other large brands all use card layouts, albeit distinctly different card layouts from one another. When you start to look in detail at the UI’s you use daily you will notice these cards more and more frequently. However, the beauty in cards is that you don’t specifically see them as ‘cards’; they blend seamlessly into the user interface, enhancing that overall experience.

What is a card?

There are a few different definitions of what a card is; Nielsen Norman Group defines a ‘card’ as a UI design pattern that groups related information in a flexible-size container visually resembling a playing card. Google’s Material Design 3 states that:         

  •   A card is identifiable as a single, contained unit.
  •   A card can hold anything from images to headlines, supporting text, buttons, lists, and other components.
  •   A card’s layout and dimensions depend on its contents. There is no one right way to make a card.

Audi’s design system states: Cards contain elements and functions on a single topic and can be used as teasers for additional content. They optionally show text, icons, an image or a video, links and triggers – alone or in combination. The format, size and layout of a card are flexible within the layout structure. Pretty self-explanatory, right?  We define a card as a flexible UI component containing related information. Just like a physical business card, a visual grabs the attention and the card has all the necessary information grouped together in a small, digestible format.

Why are cards so popular?

Cards are popular for a good reason. 

  • They are intuitive; due to their commonality, users are familiar with them and know how to interact with them accordingly. 
  • Their clickable nature is helped by subtle shadows, attention-grabbing imagery and soft edges perhaps inspired by their tangible counterparts.
  • They are flexible regarding their adaptiveness to different screen sizes and ability to display information in various formats, sizes and shapes.
  •  They provide structure and help organise information into meaningful sections, making content more scannable that’s easy to digest.
  • They adhere to laws and gestalt principles such as Fitt’s law, which make them user-friendly and popular with users and UI designers.

If cards are popular, does that mean we should always use cards?

No, whilst there are many benefits of using cards, they are not the solution to every problem. Of course, it depends on the information you are trying to convey and the user’s needs at that point in their journey.  Let’s imagine your user wanted to browse a dashboard regarding their energy usage over the last seven days. We can use a card that displays the total energy used over the seven days. This might have a title, a total and a CTA. Then for further context, we might have a card that shows two bar charts, one for gas usage and another for electricity, again with legends, totals and CTAs. Then another card shows how much energy has been used each day of the week and so on. These cards contain high-level related information grouped into smaller manageable chunks. Clever use of space, size, and position helps the user focus on each specific card without overwhelming them with all the information in one go. However, suppose your user wanted to see which devices used the most energy over a set period. In that case, this requires more intent than a casual browse, so a more hierarchical list showing the consumption from high to low would be a more appropriate pattern. In short, don’t just jump to cards as the solution without thinking of the user’s needs, cards may work for most things, but it doesn’t mean it’s necessarily the right choice regardless of their popularity.

Conclusion

UX Designers love cards, and so do users, but we should only use them where appropriate. We should tailor our cards to meet the user’s specific needs by experimenting with size, proximity and colour to create more logical groupings and hierarchies that grab attention and draw the user to navigate deeper. Undoubtedly, their popularity will continue to increase due to their flexibility in creating beautiful, consistent experiences. If you need help realising your solution with our expert user research techniques and considered design approach, please contact us.

FAQ's

Cards are intuitive because people already recognise them from products like Netflix and Facebook, so they know how to interact without instruction. They’re flexible across screen sizes, break complex information into scannable chunks, and reduce cognitive load. That familiarity and adaptability is why they’ve become such a common UI pattern.

No. Cards suit high-level, browsable information grouped into digestible chunks, like a dashboard summarising energy use across a week. But when users need to compare detail or scan from high to low, a list or table works better. The pattern should follow the user’s intent, not its own popularity.

Through user behaviour and task analysis, not trend. We look at how people consume the information, what they need to prioritise, and how they expect content to be structured, then test it. The same content can need different patterns depending on whether the user is casually browsing or hunting for a specific answer.

Yes, when used appropriately. They make content easier to scan and explore, and let users digest information in focused chunks. But overusing them, or applying them where a list or table fits better, fragments the interface and adds clutter. The benefit comes from fit, not from defaulting to cards everywhere.

We start from user goals and behaviour, not a preferred pattern. Through research, testing and information architecture work, we determine whether cards, lists, dashboards or a hybrid best support the journey, so the decision is evidence-led rather than driven by what’s fashionable. Our UX design work is built on that principle.

Other Insights