Page History

...

Card photo (required)

Circle crop headshotphoto
- 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 photo size 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.

...

If the card photo will not work for the modal header photo, we can add an override for the modal

Match the specs for the matching card photo provided.
- Use case: You have a great, zoomed out shot of a professor teaching a class that works well in the modal header. But a different, zoomed-in shot works better for the card.
Match the specs for the card photo provided.
Note that this photo should be similar to the card photo (same person, similar pose, same outfit) so we don't cause user confusion. A similar photo should will reassure the user that they opened the modal content and are seeing something they expect to see.

...

We have a lot of layout flexibility in the modal body. Work with a web developer if you have a layout idea that you don't see herebelow.

Company Logo

Logo displayed next to name, title, and company
Logo specs: 512px wide, height will vary
Layout created for T2L4

...

Code Block

language	html
title	Name, title, logo - dev note and code
collapse	true

DEV NOTES
* Where it says <img />, just use the Add Media button and add whatever photo you likeneed. 
* You do not need to edit the default classes WordPress adds to the image.
* Don't skip the divider element! If you forget it, the image won't appear.

CODE
<div class="name-title-company">
   	<div class="text-wrapper">
		<p>
			<span class="name">Name</span>
   			Title/Company
   			Location
		</p>
	</div>
   	<div class="divider"></div>
   	<div class="image-wrapper">
		<img />
	</div>
</div>

...

Image can be on right or left side
(optional) Text can be styled as a quote or not
Text can include multiple paragraphs next to a larger image
Layout created for T2L4

Code Block

language	html
title	Image + Text - dev note and code
collapse	true

The DEV NOTES
* The "image-right" class can be removed if you want the image on the left instead.
* Where it says <img />, just use the Add Media button and add whatever photo you likeneed. 
* You do not need to edit the default classes wordpressWordPress adds to the image.
* Make sure to include <p> tags around any text. 
* Add the "modal-quote" class if you want quote styling like in the photo above: <p class="modal-quote"> 

CODE
<div class="modal-image-text image-right">
	<div class="image-wrapper">
		<img />
	</div>
	<div class="text-wrapper">
		<p>Text Here.</p>
		<p>Second paragraph.</p>
	</div>
</div>

Image beside text

Variations

Swiper or stacked cards
Circle crop photo or full-width photo
50/50 or full-width modal header photo
modal content
- career points

Modal with full-width image. Text overlaps image, with a dark gradient for contrast. Mobile/tablet sizes just have smaller text.

Image RemovedImage Removed

Staggered image collage

Requires 3 vertical photos.
Recommended size: 700x1000px

Close up

Source: AI Hub

Image Added

Inside modal

Image Added

Code Block

language	html
title	Staggered Collage - dev notes and code
collapse	true

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>

Code Block

language	html
title	Staggered Collage no caption
collapse	true

	Mixed image collage Image Added

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

Image one and two must be horizontal, image three vertical.
- Image one and two size: 2400x1600px, smaller images with the same aspect ratio will also work, such as 512x341px or 1024x682px
- Image three size: 512x768px

Fields

Card
- Remind writer/strategist we must 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 - 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 you will need to add a horizontal image 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.

Code Templates for Modal Content

Modal content is added in a WYSIWYG field, so you'll need to add HTML elements with classes for styling. Copy the code below for the content you need:

Modal with pullquote, horizontal rule <hr>, and microtitle styling for last subhead

Image Removed

Microtitle styles for subheads (with yellow triangle)

These styles can be used on any heading level.

Code Block

language	html

<h3 class="microtitle mb-3"><img class="microtitle-arrow" alt="" src="/wp-content/uploads/2024/10/Two-toned-yellow-arrow-digital-100x164-1.png" width="9" height="15" aria-hidden="true" /> Subheading</h3>

Horizontal rule

Code Block

language	html

<hr class="hr-gray my-5" />

Pull quote

Can adjust or remove "my-4" class if needed. Author and cite elements are optional.

Code Block

language	html

<figure class="wsb-pullquote mx-0 my-4">
    <p class="quote">add quote here</p>
    <p class="author"><cite> add speaker name here</cite></p>
</figure>

Career Points (for T2L4)

Image Removed

Just add the "career-points" class to any ul to get this styling.

Code Block

language	html
collapse	true

<ul class="career-points">
 	<li>Point 1</li>
 	<li>Point 2</li>
 	<li>Point 3</li>
</ul>

...

language	html
title	Image + Text
collapse	true

Supporting Images

...

Staggered image collage

Image Removed

...

Mixed image collage

Image Removed

Staggered collage (3 vertical photos)

Photos must be vertical. Recommended size: 700x1000px

Image two and three are hidden for mobile screens.
Can use a single caption for all three images for desktop. A mobile caption for just image one, since the others are not visible at that breakpoint.

Code Block

language	html
title	Staggered Mixed Collage w/caption
collapse	true

	<div class="staggeredmixed-wrapper mtlayout-5collage">
		   <div class="staggered-image-one image-one">
			      <img decoding="async" class="image brand-border-radius" src="" alt="" aria-describedby="staggeredmixed-collage-caption">
		   </div>
		   <div class="staggered-image-two image-two">
			      <img decoding="async" class="image brand-border-radius" src="" alt="" aria-describedby="staggeredmixed-collage-caption"> 
		   </div>
		<div class="staggered-image-three image-three">
			<img decoding="async"    <div class="imagecaption" srcid="" alt="" aria-describedby="staggeredmixed-collage-caption">
		</div> 
		<div class="caption" id="staggered-collage-caption">
         		<p class="mobile-caption mtpt-02">Mobile Caption</p>
      		<p class="desktop-caption mt-1 text-centerend">Desktop Caption</p>
   		</div>
  
 	</div>

Code Block

language	html
title	Staggered Collage no caption
collapse	true

	<div class="staggered-wrapper mt-5 mb-0 pb-0">
		<div class="staggered-image-one image-one">
			image-three">
      <img decoding="async" class="image brand-border-radius" src="" alt="">
		</div>
		<div class="staggered-image-two image aria-describedby="mixed-collage-caption">
   </div> 
</div>

Code Block

language	html
title	Mixed Collage no caption
collapse	true

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

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

Image one and two must be horizontal, image three vertical.
- Image one and two size: 2400x1600px, smaller images with the same aspect ratio will also work, such as 512x341px or 1024x682px
- Image three size: 512x768px
Image two and three are hidden for mobile screens.
Can use a single caption for all three images for desktop. A mobile caption for just image one, since the others are not visible at that breakpoint.

Code Block

language	html
title	Mixed Collage w/caption
collapse	true

<div class="mixed-layout-collage">
   <div class="image-one">
      <img decoding="async" class="image  <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="" 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> 
</div>

Variations

Swiper or stacked cards
Circle crop photo or full-width photo
50/50 or full-width modal header photo
modal content
- career points

Modal with full-width image. Text overlaps image, with a dark gradient for contrast. Mobile/tablet sizes just have smaller text.

Image AddedImage Added

Fields

Card
- Remind writer/strategist we must 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 - 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 you will need to add a horizontal image 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.

Code Templates for Modal Content

Modal content is added in a WYSIWYG field, so you'll need to add HTML elements with classes for styling. Copy the code below for the content you need:

Modal with pullquote, horizontal rule <hr>, and microtitle styling for last subhead Image Added

Microtitle styles for subheads (with yellow triangle)

These styles can be used on any heading level.

Code Block

language	html

<h3 class="microtitle mb-3"><img class="microtitle-arrow" alt="" src="/wp-content/uploads/2024/10/Two-toned-yellow-arrow-digital-100x164-1.png" width="9" height="15" aria-hidden="true" /> Subheading</h3>

Horizontal rule

Code Block

language	html

<hr class="hr-gray my-5" />

Pull quote

Can adjust or remove "my-4" class if needed. Author and cite elements are optional.

Code Block

language	html

<figure class="wsb-pullquote mx-0 my-4">
    <p class="quote">add quote here</p>
    <p class="author"><cite> add speaker name here</cite></p>
</figure>

Career Points (for T2L4)

Image Added

Just add the "career-points" class to any ul to get this styling.

Code Block

language	html
collapse	true

<ul class="career-points">
 	<li>Point 1</li>
 	<li>Point 2</li>
 	<li>Point 3</li>
</ul>

Code Block

language	html
title	Image + Text
collapse	true

Code Block

language	html
title	Mixed Collage no caption
collapse	true

Page tree

Versions Compared

Old Version 42

New Version 43

Key

Card photo (required)

Company Logo

Variations

Staggered image collage

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

Fields

Card

Modal Popup

Configuration section

Introduction and Footer sections

Code Templates for Modal Content

Image Removed

Microtitle styles for subheads (with yellow triangle)

Horizontal rule

Pull quote

Career Points (for T2L4)

Supporting Images

Staggered collage (3 vertical photos)

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

Variations

Fields

Card

Modal Popup

Configuration section

Introduction and Footer sections

Code Templates for Modal Content

Image Added

Microtitle styles for subheads (with yellow triangle)

Horizontal rule

Pull quote

Career Points (for T2L4)