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

Sketch
Released
Figma
Planned
React
Released
React Native
Released (experimental)

Content structure

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.