...
A card displaying a photo and brief teaser copy. When selected, the card opens a modal (popup) with more details about the topic or person.
...
Example 1 - Cards with headshots
| Example 1 - Modal popupopen
|
Example 2 - Cards with environmental or portrait photos
| Example 2 - Modal popupopen
|
Use When
- Storytelling; sharing a person's profile or career background (examples: BBA Careers, Companies and Recruiters)
- Displaying multiple details or subtopics for a topic (example: AI Hub page)
- You have content to fill at least 2 cards and their modals (this component doesn't look as nice when there is only one card)
- There is enough quality content such that interacting with the modal feels worthwhile to the user.
- Don't just fill the modal with fluff to try to make this component work. If it is a struggle to create enough content for each of the cards, consider using a different component and/or organizing the content differently.
...