UI card design: Definition, tutorial, and examples

Card layouts are everywhere now, from ecommerce sites to blogs to social media. So, why is this UI element so prominent? It lays out clear information in digestible chunks.

You can design your own cards to create easily navigable user interfaces, too. Let’s walk through how. But first, let’s cover the basics: What are cards and why are they beneficial for your app?

What is a card in UI design?

A card is a UI design component that displays content and actions about a single subject. Designers use cards to organize related information effectively, often linking to other internal pages.

There are even cards, for instance, on this blog page. They include pertinent information like post titles, authors, and publish dates.

You’ve probably also seen cards on shopping websites for individual products. Take, for instance, Amazon’s cards for grocery services:

The benefits of cards

Cards offer a preview of the linked content and can display featured information, related items, navigational options, and so on. Ideally, we use them in groups to present related information. These are the benefits that cards bring to an app:

• Enhanced visual appeal — Cards provide an appealing way to highlight important information, making it more engaging and attractive to users. They improve accessibility by supplying precise and focused content
• Improved information organization — Cards facilitate the organization and grouping of information, making it easier for users to scan and find relevant content. Cards can be arranged in a grid, a vertical list, or a carousel. Using a single card is generally not recommended
• Simplified navigation — Cards can be clickable elements that lead users to other internal pages. The primary advantage of navigation tools is their additional visual weight as containerized objects on the page. They also accommodate both media and text in order to provide more context where the link leads
• Adaptability — Cards can be responsive and adjust to different screen sizes and devices by rearranging, adding, or subtracting. This flexibility of content presentation and layout design ensures a consistent and optimal user experience across all platforms

When aiming to spotlight information or offer related content, cards can be comparable to a list or a table component. For example, ecommerce platforms often provide a switch to toggle between a list and a card view.

Where do designers use card UIs?

The concept of the card UI is versatile and can be applied to a diverse range of use cases, enhancing user interaction and experience. These include, but are not limited to:

• Ecommerce websites: Cards can be used to clearly and concisely display vital product information, including detailed pricing, visually appealing product images, and straightforward add-to-cart options. This use of cards can significantly enhance the shopping experience for users

• Social media platforms: Cards can function as a medium for fully showcasing user profiles. They can also be used to present individual posts, media content, and other interactive elements, all encapsulated in a neat card format

• News or blog websites: Cards can be effectively used to present headlines and article summaries. Additionally, they can showcase featured images or graphics, giving the user a snapshot of the content before they delve deeper

• Task management applications: Cards can be a tool for efficiently organizing and presenting tasks. They can display relevant information, such as deadlines, priority levels, and task details, in a visually appealing and easily understandable format

The anatomy of a card

Cards are built to be modular and flexible. They consist of three core sections — the header, body, and footer — all within a single container. The card’s content is organized into these three sections, with the visual emphasis depending on the relevance of each element.

Except for the card’s title, all other elements are optional. This allows card layout for a wide range of possibilities across digital experiences. Each section can contain pre-formatted subcomponents, such as the card’s title, subtitle, text, or other content types, including tables, grids, data visualization, buttons, links, forms, and more:

Header

The card header usually comes with media, such as a preview or an image, to give the user a visual cue about the card content. The aspect ratio of this area can range from 4:1 (shortest) to 3:4 (tallest), with recommended default sizes of 2:1, 4:3, and 16:9.

Body

As I mentioned above, cards can have a variety of functions, and you can include basically anything you think would be essential. Here are a few common elements you’ll find in the body of a card:

• Title — Title text often communicates the subject of the card. It should be brief, concise, and straightforward. Cards utilize the heading text style for titles, and the size can be adjusted as needed
• Subtitle — The subtitle is a secondary, smaller text element that serves various functions, such as providing nuanced context or additional information to the users in a card
• Supporting text/description — This is an optional element; it’s a concise text that further elaborates on the information presented in the title. A well-crafted description can enhance understanding and engagement, making it a beneficial component of the overall content
• Labels/badges — These optional elements can be used to indicate the content type or status. They can be arranged in various locations on a standard card. If the card has a preview, it’s best to anchor the badge to the lower right side, overlaid on the preview. If there’s no preview, you can place the badge in the footer on the left. If neither of these options works for your needs, you’re welcome to place the badge anywhere on the card. Just make sure the placement is consistent across all system cards.

Footer

The footer can serve as a primary action area for elements like buttons, CTAs, or other controls. If there’s just one action (besides opening or viewing the card), use a button or CTA to communicate that action. Designers should carefully consider the design and interaction of these elements to offer an intuitive user experience.

A footer is exclusive to standard cards. Otherwise, the card container can function as a clickable card. If a card only allows for viewing or opening in more detail, do not include buttons or CTAs. A click anywhere on the card should trigger that action.

How to design a card UI

Now that we know what cards are and why we use them, let’s go over how you can design your own card UI.

States

When designing your card, it is crucial to include different states to reflect the status of the interactive components. These states are:

• Enabled, where the component is active and interactive
• Disabled, indicating the interaction is currently not possible
• Hovered, showing that a cursor is positioned over the component
• Focused, representing the component is ready for interaction
• Pressed, occurring when the component has been clicked or touched

Grouping cards

Grouping is another essential concept in card design. Try to group cards that display similar content to enhance the user’s understanding and interaction with the content.

In terms of layout, maintaining alignment is crucial. Consistency in alignment contributes to an organized and visually pleasing interface.

Moreover, it’s important to keep a certain spacing between each card. This spacing should be both horizontal and vertical to ensure clarity and readability.

The size of this spacing should typically be a multiple of four pixels, with 8px or 12px being common choices. This practice helps to create a balanced and harmonious layout, making it easier for users to distinguish between cards and ensuring the viewing experience.

Best practices for card content

There are various types of cards, but all card content follows the same general purpose: to set an expectation for what happens when a user interacts with it. To create effective UI card designs, keep these tips in mind:

Simplicity

Cards should provide a snapshot of available information, not an overload of unnecessary details. Cut the content only to communicate what one will find at the card’s destination.

Titles should be short (5–7 words) and focused on the value of interacting with the card. Metadata should be brief (about 10–15 words, though it can be longer depending on the complexity of the information), supplementing the title with more in-depth context. Keep button text to 1–3 words, using a verb phrase to state the action one is taking.

Clear hierarchy

Establishing a clear visual hierarchy within the cards is crucial. You can achieve this through the strategic use of visual cues such as size, color, and typography.

Implementing this visual hierarchy guides the user’s eye and allows them to quickly and efficiently identify the most important information. This can significantly enhance their browsing experience, making the interaction with the cards more intuitive and the information more accessible.

Consistent layout

Consistency in the layout across cards is key for a cohesive and familiar user experience. This includes spacing, alignment, and placement of elements.

Cards grouped together should have similar size and content length, controlled by character and word counts. Opt for left alignment to optimize readability and avoid centering text and content.

Uniform card sizes

Aim for similar card sizes and content length. If varying content lengths result in different card sizes, prefer a masonry layout over a uniform grid. Avoid extending the button in the same row to match a card of a different length, and do not leave gaps between rows of cards.

Intuitive interactions

It’s important to incorporate intuitive interactions within the cards. This could include but is not limited to swipe gestures, clickable elements, or hover effects. The key intention behind this is to enhance the overall user experience significantly.

Conclusion

By adhering to these best practices for card design, designers can create interfaces that are not only visually appealing but also user friendly. In doing so, they can ensure that the user effectively presents and comprehends information, enhancing the overall user experience and interaction with the platform.

As mentioned at the very beginning of this blog post, the card design could be modular and flexible. If you would love to learn more, you can look into design system references for cards, like Material Design or the Dell Design System.

Header image source: IconScout