View Source

Also known as: card with popup, story cards, profile cards

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.

Design

Cards with environmental or portrait photos Source: OIM Department	Modal open - full-width header image
Cards with headshots Source: BBA Careers	Modal open
Cards with environmental or portrait photos Source: AI Hub	Modal open - 50/50 header image

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

Editorial Guidelines

Follow our general Web Copy General Guidelines in addition to the following:

For the cards

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

For the modals

Modal header

Microtitle (optional)
- Card microtitle can be displayed here or hidden
Title (required)
- Card title can be displayed here or overridden with a slightly longer title
- Character limit: 50 characters
Supporting detail (optional)
- Brief copy to display job titles, company, and/or majors
- Character limit: 100 characters

Modal body

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 header photo (optional)

If the card photo will not work for the modal header photo, we can add an override for the modal
- 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 will reassure the user that they opened the content and are seeing something they expect to see.

Modal supporting images (optional)

We have a few options for adding images to the modal body. Work 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

WSB Knowledge Base > Card - Modal > image-2025-10-14_15-27-47.png

DEV NOTES
* Where it says <img />, just use the Add Media button and add whatever photo you need. 
* 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 beside text

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

WSB Knowledge Base > Card - Modal > image-2025-10-14_15-32-35.png

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 need. 
* You do not need to edit the default classes WordPress 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>

Staggered image collage

Requires 3 vertical photos.
Recommended size: 700x1000px

Detailed view

Source: AI Hub

WSB Knowledge Base > Card - Modal > Staggered-collage-cropped.png

Within modal

WSB Knowledge Base > Card - Modal > Screenshot 2026-03-17 at 3.34.30 PM.png

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 image specs: 2400x1600px, smaller images with the same aspect ratio will also work, such as 512x341px or 1024x682px
- Vertical image specs: 512x768px