Cards

Embed native-looking content blocks within your product—great for product marketing

What are in-app cards?

Embedded cards, or simply cards, are UI components that serve as containers for various content and actions related to a single subject. Commonly these are placed “in-line” with other content within the application, so they feel like a native part of the product/app/UI, even if they are a gateway to resources outside the product.

Cards may also sometimes be used in a “stack” fashion so that the same real estate can be used for multiple messages or content items; users can swipe or click to navigate or dismiss one to show the next Card.

Common use cases for cards

  • Content Aggregation: Displaying related information pieces, like articles, products, or profiles—concisely.

  • Offers / Promotions: Presenting opportunities for users to explore new products or engage through other channels (e.g. attending events)

  • Self-Serve Learning: Providing a suite of options for a user to learn from during user onboarding or to deepen adoption. 

  • Dashboard widgets: Showcasing summary information or stats, often clickable to reveal more details.

  • Product Listings: Featuring products in online stores, highlighting key information such as price and descriptions.

Best practices for cards

  • 1 Stay relevant! Target cards to users who are likely to engage with their content.
  • 2 Use contrasting design to help cards stand out from the rest of the UI elements on the page. However, ensure this is still within the application's overall brand theme and style guide. 
  • 3 If stacking, don’t add too many; ideally, 4-5 as a maximum, which represents the patience most users have to engage and learn in a sequence.
  • 4 Where possible, have CTAs that open in-app or navigate the page, rather than opening a new tab, to drop-offs.
  • 5 Distinct and scannable: ensure each card is distinct to a user after scanning. Use titles, imagery, and possibly colors to achieve this.

Examples of great cards

Recommended reading 🤓

Boost product adoption and
reduce churn

Get started free in our sandbox or book a personalized call with our product experts