View Source

Design

Card with full-width or circle headshot images that can open into a modal for more information. There are options for 1, 2, or 3 columns.

There is an open modal button on the lower right corner of the cards that can be a stretch link. There are two modal close buttons in the modal popups (upper right corner and bottom right corner).

Examples of full-width and headshot modal cards and 1, 2, 3 columns


Modal for full-width cards. The header will be 50/50 for desktop and tablet, and full-width for mobile.	Modal for circle crop headshot. The layout will be the same in desktop, tablet, and mobile.

Use Cases

For storytelling or when you want to share a lot of information in a modal. The card displays a small amount of copy and the modal shows more detail.
Example: Student stories on BBA Careers page

Fields

Card
- Limit the amount of copy in the cards, since more detail can be shown in the modal.
- Microtitle (optional) - Keep this short. Can be used as a microtitle or for person's name with parenthesis for graduation program and year
  - Character limit: copy should fit on one line, so the limit depends on number of columns in the layout
  - 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 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 should have content so the card has an html heading
  - Character limit: 40 characters
  - This content will display in the modal header. Add content to the "Modal Title Override" field to replace this content.
- Card Supporting Copy (optional) - Use sparingly. Only use when the title character limit is too restrictive
  - 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
- Card Image - you can use the standard image size of 2400x1600px for horizontal cards. You can use vertical images as well to make the cards vertical, 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 headshot images
Modal Popup
- Modal Title Override - can override the card title. This can have more characters, 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 in the card section
- 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.
- 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

Microtitle styles for subheads (with yellow triangle)

<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

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

Pull quote

<figure class="wp-block-pullquote mx-0 my-4 text-start">
    <p class="fs-5">add quote here</p>
</figure>

Supporting Images

Staggered image collage	Mixed image collage

Staggered collage (3 vertical photos)

<div class="acf-block-image-collage mt-5 mb-0">
	<div class="staggered-wrapper mb-0 pb-0">
		<div class="swiper-slide staggered-image-one image-one">
			<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/ai-day-presentation-700x1050-1-683x1024.jpg" alt="A speaker points to a slide while presenting onstage at AI Day."  aria-desribedby="collage-caption">
		</div>
		<div class="swiper-slide staggered-image-two image-two">
			<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/Generative-AI-Workshop_022024_DSC_1665-700x1051-1-682x1024.jpg" alt="A man sits in front of a table and speaks into a microphone. There is a laptop and coffee thermos on the table." aria-desribedby="collage-caption">
		</div>
		<div class="swiper-slide staggered-image-three image-three">
			<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/Generative-AI-Workshop_022024_DSC_1616-700x1050-1-683x1024.jpg" alt="A woman presents to an audience while holding a mic pack and a remote for advancing her slideshow." aria-desribedby="collage-caption">
		</div> 
		<div class="caption" id="collage-caption">
      		<p class="mobile-caption mt-0">Mobile Caption</p>
      		<p class="desktop-caption mt-1 text-center">Desktop Caption</p>
   		</div> 
 	</div>
</div>

<div class="acf-block-image-collage mt-5 mb-0">
	<div class="staggered-wrapper mb-0 pb-0">
		<div class="swiper-slide staggered-image-one image-one">
			<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/ai-day-presentation-700x1050-1-683x1024.jpg" alt="A speaker points to a slide while presenting onstage at AI Day.">
		</div>
		<div class="swiper-slide staggered-image-two image-two">
			<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/Generative-AI-Workshop_022024_DSC_1665-700x1051-1-682x1024.jpg" alt="A man sits in front of a table and speaks into a microphone. There is a laptop and coffee thermos on the table.">
		</div>
		<div class="swiper-slide staggered-image-three image-three">
			<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/Generative-AI-Workshop_022024_DSC_1616-700x1050-1-683x1024.jpg" alt="A woman presents to an audience while holding a mic pack and a remote for advancing her slideshow.">
		</div> 
 	</div>
</div>

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

<div class="mixed-layout-collage">
   <div class="image-one">
      <img decoding="async" class="image brand-border-radius" src="" alt="" aria-desribedby="collage-caption">
   </div>
   <div class="image-two">
      <img decoding="async" class="image brand-border-radius" src="" alt="" aria-desribedby="collage-caption"> 
   </div>
    <div class="caption" id="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-desribedby="collage-caption">
   </div> 
</div>

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