Page History

...

• 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 YouTube video

Design + Images

Card photo (required)

...

• 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>

...

Implementation (in progress)

...

)

...

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

ACF Fields

...

Variations

• Cards can be stacked or in a swiper
The
• When card images are full-width, the modal header can have a 50/50 or full-width image
• modal content
  • career points

Additional modal text content options:

ACF Fields

Card

• Remind writer/strategist 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
  • If using a vertical photo for the card,  you will need to add a horizontal 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
• above title.
• Full width image? - makes image full width inside the modal header instead of half width.
  • Recommend
use of
• • using Modal Image Override field with this, to ensure the card image and modal image work well with each other.
• Modal Title Override - Use this to override the card title with different text for the modal header. This field .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 Use this to override the full-width image used for the cardcard image. It is unlikely you will need this field for circle crop images.
• Modal Text - WYSIWYG for modal copy. You will need to use inline HTML and CSS classes and HTML for styles.
  • See Copy code templates belowsnippets above

Configuration

...

• Number of columns - you can select one, two, or three columns. Three columns is the default.
  • Please note that The 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)
  • If you run into issues with card copy being too long, either ask the copywriter to shorten the copy or 
• Stretch link? - this will make the modal open when a user selects anywhere on the card. Checked is the default.

Introduction and Footer

...

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

Code Templates for Modal Content

...

Microtitle styles for subheads (with yellow triangle)

...