Skip to content

Card Collection

A collection of cards that provide brief, related pieces of information and serves as an entry point, teaser, or preview to a more detailed content. By pressing on the card, users can select the card and navigate to a dedicated page with more detailed information.

The card system provides enhanced customization and flexibility, along with adaptable sizing options to accommodate different form factors and layouts, such as horizontal scroll, vertical list, or masonry layouts for cards.

Best Practices for Designing Effective Cards

  • A card should focus on a single topic and be a coherent, concise representation of a conceptual unit.
  • A card should present information in a compact and easily scannable format to provide user a quick overview of various information.
  • Avoid placing unrelated elements within a card and don’t overload the user by including an excessive number of UI elements within a card.

Card Structure

The contents of a card are categorized into several components: Media, Header, and Footer.

  • Media: This is an optional component that allows you to include an image that complements the card's context, serving as a decorative element.

  • Header: The card header provides a quick overview of key information, such as the title, subtitle, or status of the card. When using the card header, include only essential information about the card’s content, and limit the extended header to a maximum of three rows.

    An action button within the card header allows users to perform actions that directly affect the card, such as bookmarking and filtering.

    Ensure consistent positioning of components in the card header throughout the app. For instance, if one card header includes tags on the first line, all other card headers in your app should follow the same format.

  • Footer: The card footer, also known as the card toolbar, is located at the bottom of a card that can contain two buttons (Primary and Secondary).

    Always position the primary action button on the right side of the footer and the secondary action button on the left side. Ensure that button labels precisely reflect the action to be performed and use short, concise text to avoid truncation.

The card collection can be arranged in specific layout determined by the developer. These layouts control the placement, order, and visual presentation of cards, ensuring an aesthetically pleasing design. Other than the existing layouts (horizontal scroll and vertical list) that are already available on other collection section, a new masonry layout has been introduced to allow the cards to be arranged in a flexible, grid-like structure, with each card adapting to the available space while maintaining alignment with adjacent cards. It optimizes space usage and provides an aesthetically pleasing visual layout. Use a masonry layout if you want to showcase important content from different data sources, such as product features, KPIs, or statutes side by side which enable a holistic and seamless information approach. Masonry layout is recommended if there are nine or more cards to display. In the masonry layout, the height of each card can vary depending on the content, creating an asymmetric appearance. For more information, refer to CardCollection.

Layout

Card collections can be arranged in various layouts determined by the developer. These layouts control the placement, order, and visual presentation of cards, ensuring an aesthetically pleasing design. In addition to the existing horizontal scroll and vertical list layouts, a new masonry layout has been introduced. This layout arranges cards in a flexible, grid-like structure where each card adapts to the available space while maintaining alignment with adjacent cards. It optimizes space usage and provides a visually appealing arrangement.

Use the masonry layout to showcase important content from different data sources, such as product features, KPIs, or statuses side by side, offering a holistic and seamless information presentation.

Note

  • Masonry layout is recommended for displaying nine or more cards.
  • In the masonry layout, card heights can vary depending on the content, resulting in an asymmetric visual effect.

Known Limitations

  • On iOS, ActionButton OnPress and OverflowItems can co-exist. While on Android, ActionButton OnPress and OverflowItems cannot co-exist. If both are defined, the OverflowItems will take precedence.
  • On iOS, ItemSeparator is working for all item types of ExtendedHeader. While on Android ItemSeparator is only working for Label item type of ExtendedHeader.
  • On iOS, ExtendedHeader with Rating item type can support multiple items. While on Android, only the first item is displayed for Rating item type.
Last update: September 6, 2024