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.
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.
For more guidance on visual components, check out illustrations.
For cards without pictures, use card components.