Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Expand
titleSections on this page

Table of Contents
minLevel2

Design 

Cards with environmental or portrait photos

Source: OIM Department

Image Modified

Modal open - full-width header image

Image Modified

Cards with headshots

Source: BBA Careers

Image Modified

Modal open

Image Modified

Cards with environmental or portrait photos

Source: AI Hub

Image Modified

Modal open - 50/50 header image

Image Modified

Use When

  • Storytelling; sharing a person's profile or career background (examples: BBA Careers, Companies and Recruiters)
  • Expanding on 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 needs to be 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 with less copy and/or organizing the content differently.

...