Page History

Also known as: card with popup, story cards, profile cards, card with plus sign, expandable card

Description

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.

...

Examples 

Design 

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)
  
  • This component works great when you have varying amounts of details for each topic. (e.g. when you have 2 detail paragraphs for topic A and 4 paragraphs for topic B)
  • 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.

...

• Limit the amount of copy in the cards, since more detail will be shown in the modals.

• Microtitle (optional) - Keep this short. Can be used as a microtitle or for person's name with parentheses for graduation program and year
  • Character limit: ~40 characters 
    • Copy should fit on one line, so the limit depends on number of columns in the layout (more columns = less room for copy)
  • Use this field or the card supporting copy field, especially for cards with full-width background images.
  • This content will display in the modal header or it can be hidden there
• Title (required) - This field must have content so the card has a proper html heading 
  • Character limit: 40 characters
  • This content will display in the modal header or it can be replaced there with a longer title
• Card Supporting Copy (optional) - Use sparingly. Only use when the title character limit is too restrictive for your needs. There is usually not room for it, but can be used instead of microtitle.
  • Character limit: 70 characters
  • Use this field or the microtitle field, especially for cards with full-width background images.
  • This content will not be displayed in the modal

...

• No character limit, but keep the length within reason. Typically, modal content spans 3 to 6 short paragraphs or chunks of content.
• Follow web best practices for keeping content easy to digest and scannable
  • Use subheadings if you include more than 2 paragraphs
• We can include a variety of content here, such as:
  • paragraphs
  • pullquotes
  • supporting images
  • photo collages
  • an embedded YouTube video

Design Assets Needed

Images

Card photo (required)

• Circle crop photo
  • Square photo with face centered; use a headshot or another type of photo where the person is facing the camera
  • Dimensions: 500x500px or 1000x1000px
  • jpeg file
• Full-width photo
  • Standard horizontal photo; use a portrait or environmental shot
    • Dimensions - : 2400x1600px
  • jpeg file
  • Face should be in top 1/3 of image so it doesn't get covered by text at the bottom
  • We can add vertical images to make the cards taller, if desired. But all photos for cards in the same row/block should have the same dimensions.

...

Modal supporting images (optional)

• We have a lot of layout flexibility in few options for adding images to the modal body. Work with a web developer if you have a layout idea that you don't see belowWork with a web developer.

Company Logo

• Logo displayed next to name, title, and company 

• Logo specs: 512px wide, height will vary

• Layout created for T2L4 landing page

...

DEV NOTES
* Image one and two must be horizontal, image three vertical
* Image two and three are hidden for mobile screens.
* Can use a single caption for all three images for desktop. 
* The mobile caption should just be for image one, since the others are not visible at that point.

CODE - WITH CAPTION
<div class="mixed-layout-collage">
   <div class="image-one">
      <img decoding="async" class="image brand-border-radius" src="" alt="" aria-describedby="mixed-collage-caption">
   </div>
   <div class="image-two">
      <img decoding="async" class="image brand-border-radius" src="" alt="" aria-describedby="mixed-collage-caption"> 
   </div>
    <div class="caption" id="mixed-collage-caption">
      <p class="mobile-caption pt-2">Mobile Caption</p>
      <p class="desktop-caption text-end">Desktop Caption</p>
   </div>
   <div class="image-three">
      <img decoding="async" class="image brand-border-radius" src="" alt="" aria-describedby="mixed-collage-caption">
   </div> 
</div>

CODE - NO CAPTION
<div class="mixed-layout-collage">
   <div class="image-one">
      <img decoding="async" class="image brand-border-radius" src="" alt="">
   </div>
   <div class="image-two">
      <img decoding="async" class="image brand-border-radius" src="" alt=""> 
   </div>
   <div class="image-three">
      <img decoding="async" class="image brand-border-radius" src="" alt="">
   </div> 
</div>

Variations

Stacked or swiper

...

...

Modal header image

...

Image Removed

...

Additional modal elements

...

• red pullquote
• gray horizontal rule
• microtitle (yellow triangle, subhead styled in all caps, dark blue text)

  

...

• These are standard sections for our custom blocks.

Resources

• Card modal mockup in Figma