Page History

...

Use When

• Storytelling; sharing a person's profile or career background (examples: BBA Careers, Companies and Recruiters)
• A single card can display multiple details or subtopics for a single 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 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 with less copy and/or organizing the content differently.

...

• No character limit, but keep the length within reason. Typically, modal content spans 3 to 6 short paragraphs.
• 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 YT video

Implementation (in progress)

Variations (more screenshots showing additional features) 

• Should be an orderly progression, not an attempt to show every possible combination

ACF Fields

Other technical details we already include

Design + 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
  • 500x500px or 1000x1000px
• Full-width photo
  • Standard horizontal photo; use a portrait or environmental shot
    • Dimensions - 2400x1600px
  • 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.

...

• Requires 3 vertical photos.
• Recommended size: 700x1000px

DEV NOTES
* Images 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="staggered-wrapper mt-5">
		<div class="staggered-image-one image-one">
			<img decoding="async" class="image" src="" alt="" aria-describedby="staggered-collage-caption">
		</div>
		<div class="staggered-image-two image-two">
			<img decoding="async" class="image" src="" alt="" aria-describedby="staggered-collage-caption">
		</div>
		<div class="staggered-image-three image-three">
			<img decoding="async" class="image" src="" alt="" aria-describedby="staggered-collage-caption">
		</div> 
		<div class="caption" id="staggered-collage-caption">
      		<p class="mobile-caption mt-0">Mobile Caption</p>
      		<p class="desktop-caption mt-1 text-center">Desktop Caption</p>
   		</div> 
 	</div>


CODE - NO CAPTION
	<div class="staggered-wrapper mt-5 mb-0 pb-0">
		<div class="staggered-image-one image-one">
			<img decoding="async" class="image" src="" alt="">
		</div>
		<div class="staggered-image-two image-two">
			<img decoding="async" class="image" src="" alt="">
		</div>
		<div class="staggered-image-three image-three">
			<img decoding="async" class="image" src="" alt="">
		</div> 
 	</div> 

...

Mixed image collage

• Requires 3 images; 2 horizontal and 1 vertical
  
  • Horizontal

Mixed collage (3 photos, 2 horizontal and 1 vertical)

• Requires 3 images; 2 horizontal and 1 vertical
  
  • Horizontal image specs: 2400x1600px, smaller images with the same aspect ratio will also work, such as 512x341px or 1024x682px
  • Vertical image specs: 512x768px

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

Implementation (in progress)

Variations (more screenshots showing additional features) 

• Should be an orderly progression, not an attempt to show every possible combination

ACF Fields

Other technical details we already include

Variations

• Cards can be stacked or in a swiper
• The modal header can have a
• Swiper or stacked cards
• Circle crop photo or full-width photo
• 50/50 or full-width modal header photoimage
• modal content
  • career points

ACF Fields

• Card

  • Remind writer/strategist we must to limit the amount of copy in the cards, since more detail can be shown in the modal. This is especially true for the full-width photo layout, since we don't want the copy to wrap and be so tall it covers faces in the card photos.

  • Microtitle (optional) - Keep this short. 
    • This content will display in the modal header by default. Set the "Display card microtitle in modal header?" field to "no" if you want to hide it in the modal
  • Title (required) - This field must have content so the card has an html heading 
    
    • This content will display in the modal header by default. Add content to the "Modal Title Override" field to replace it.
  • Card Supporting Copy (optional) - Used sparingly.  
    
    • Use this field OR the microtitle field, especially for cards with full-width background images.
    • This content will not be displayed in the modal
  • Card Image
    • For circle crop - face must be centered in a square photo
    • For full-width image - face should be in top 1/3 of the image
    • but If using a vertical photo for the card,  you will need to add a horizontal image version to the modal image override field for the image to display correctly at the top of the modal.
  • Crop image to circle? - use for square images, including headshots

• Modal Popup

  • Display card microtitle in modal header? - true/false, pulls Microtitle subfield from Card and displays in modal over title.
  • Full width image? - makes image full width inside the modal instead of half width. Recommend use of Modal Image Override with this.
  • Modal Title Override - can override the card title. This can have more characters than the card title, but it's still best practice to keep the title short.
  • Supporting Details - WYSIWYG for job titles, company, or majors
  • Modal Image Override - you can override the full width image used for the card
  • Modal Text - WYSIWYG for modal copy. You will need to use inline classes and HTML for styles.
    • See code templates below

• Configuration section

  • Number of columns - you can select one, two, or three columns. Three columns is the default.
    • Please note that headshot/circle crop style should only be used with two and three column layouts. (The image looks too small for a card in a single column layout)
  • Stretch link? - this will make the modal open when a user selects anywhere on the card. Checked is the default.

• Introduction and Footer sections

  • These are standard sections for many of our custom blocks.

...

Microtitle styles for subheads (with yellow triangle)

...