Your bookmarks

Card

Card component is a simple container for grouping some relevant information. It’s possible to add the title and description.

Component status

Figma
Planned
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; description: provides more context for the card content and works best as a one-liner; action area: creates an area for the action associated with the whole card, which works best with a small Button; expanded card section: support progressive disclosure for showing more complex or structured content for lists of items; closed card sections: sets the context for content that can be expanded.

General guidelines

  # Use Card as the main container for your content

Because of its white background, it will highlight your content against gray-ish background.

  # Don’t use description for any important explanation

Be careful about the description, users tend to skip it. If you need to tell something really important, it’s recommended to use Informational Alert

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

It can be great to use it in Passenger card when you need to split form with personal information from baggage or insurance section.