Your bookmarks

Card

Groups static content to make it easy to scan.

When you have lots of information, organizing it into related groups can help users navigate it all. If there’s no specific action to take for the group, use a card to make the connections clear to users.

Cards are great for collecting a lot of related information into one block where you can use sections to organize it. If you have only one section of information to hide, consider using a collapse. If you want to make the block actionable, use a tile.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Content structure

Title: sets the context for the card and works best when short; action: creates an action associated with the whole card; closed card sections: sets the context for content that can be expanded; expanded card section: supports progressive disclosure for showing more complex or structured content.

General guidelines

  # Use Card as the main container for your content
u003cpu003eBecause of its white background, it will highlight your content against gray-ish background.u003c/pu003e
  # Don’t use description for any important explanation
u003cpu003eBe careful about the description, users tend to skip it. If you need to tell something really important, it’s recommended to use u003cemu003eInformational Alertu003c/emu003eu003c/pu003e
  # Don’t use closable version for cases where designs are part of the main design flow.
u003cpu003eBe careful about using closable version of the Card, wrong usage could lead to confusion of the user. Closable version is used generally for cases where content is mainly informational and not so important for finishing the flow.u003c/pu003e

Card with sections

Card sections allow you to create separate sections in every card when you need to create more advanced content structure.

  # Use card sections when you have more types of content in one card
u003cpu003eIt can be great to use it in Passenger card when you need to split form with personal information from baggage or insurance section.u003c/pu003e