Developer mode
Opens components on the React tab by default.
Your bookmarks

PictureCard

Also known as ImageCard, TripCard

Displays a card with a picture and space for information and actions.

People are more likely to want to travel if they’re visually engaged with potential destinations. Get their attention with an interesting picture with just enough information to be useful without overwhelming the visual.

Picture cards offer the engagement of pictures as well as additional details and actions that can appear on hover.

Component status

Figma
Designing
ETD W40
Web (React)
Developing
ETD W41
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Component Structure

Image: visually supports the message; label: optionally categorizes the card; title: optionally indicates the main focus of the card; subtitle: optionally displays additional context for the title; actions: visible on hover and optionally include actions related to the PictureCard; children: optionally includes further information and works best with static elements.

Guidelines       

Limit information

Picture cards draw attention to themselves with interesting visuals. Don’t overwhelm users by trying to cram lots of information into a small space.

Present only the most important ideas with the chance to see more with an interaction.

Make actions clear

Users may see the interesting pictures and think they’re just decoration. If this is part of the main flow, make it clear what their next step should be.

Use cues other than just visuals to indicate why they might want to interact and what they can expect.

Present info nonvisually

Make sure everything necessary is presented to people who won’t see the picture.

If you’re using the picture card as just an image, include alternative text. If the card has content, consider whether the alt text is necessary (if it repeats the title, etc.).

If the card is only for decoration, leave the alternative text blank. Providing text just gives users extra information that does not help them.

Use inverted colors

Picture cards have complicated backgrounds that draw attention. That’s why they darken on hover/focus—to increase the contrast with their text.

If you’re adding your own content such as badges, make sure to use the inverted variants so they stand out against the dark background.

Related components

Illustration

For more guidance on visual components, check out illustrations.

Card

For cards without pictures, use card components.