Page History

Also known as: card with popup, story cards, profile cards, card with plus sign, expandable card

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.

...

Examples 

Design 

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 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)
  
• 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
• • 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 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. Only use when the title character limit is too restrictive for your needs. There is usually not room for it, but can be used instead of microtitle.
  • Character limit: 70 characters
  • Use this field OR or the microtitle field, especially for cards with full-width background images.
  • This content will not be displayed in the modal

...

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

Resources

• link to component mockup in Figma

Photo specs

Design Assets Needed

Images

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
  • Dimensions: 500x500px or 1000x1000px
  • jpeg file
• Full-width photo
  • Standard photo size - 2400x1600pxhorizontal 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.

...

• 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 Match the specs for the matching 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.

Modal supporting images (optional)

• We have a lot of layout flexibility in few options for adding images to the modal body. Work with a web developer if you have a layout idea that you don't see here.

Company Logo

• Logo displayed next to name, title, and company 

• Logo specs: 512px wide, height will vary

• Layout created for T2L4 landing page

Image Modified

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

...

Image Removed

...

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

Image Added

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>

• 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

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.

<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

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

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

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

...

Supporting Images

...

...

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.

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

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

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

...

...

Staggered image collage 

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

Additional modal elements

• red pullquote
• gray horizontal rule
• microtitle (yellow triangle, subhead styled in all caps, dark blue text)

  Image Added

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

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


Horizontal rule
* Removing "hr-gray" will make the line yellow instead.

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


Microtitle style for subheads (with yellow triangle)
* These styles can be used on any heading level.

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

• Career Points (created for T2L4)
• Image Added

Career Points
* Add the "career-points" class to any ul to get this styling.

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

• embedded YouTube video
• Example: Bob Batt on OIM Dept. page
  Image Added

Lazy Load YT Video
* Requires adding 2 HTML code blocksto the page, one for CSS styles and one for JavaScript
* To generate the video code to add to the modal WYSIWYG, you will need to add a lazy load YT block
 to a test page with the YT video, video name, cover image (if needed), and any other features. Then 
 view that page's source (or inspect it) and copy the block's code to then paste in the modal body. You 
 may have to modify the code slightly (you'll notice in example code below that line breaks were removed; 
 this is because the WYSIWYG field adds <p> tags when you add line breaks.)

CSS (place this above card modal block, in an HTML block)

<style>
 /***********
  CSS for Video in Card Modal
  ************/
  .wp-block-embed__wrapper {
    position: relative;
  }
  
  .title-text-youtube-background {
    z-index: 21;
    position: absolute;
    background-image: linear-gradient(rgb(40,39,40),rgba(40,39,40,0.8),rgba(40,39,40,0.6),rgba(40,39,40,0.3),rgba(40,39,40,0.1), transparent);
    top: 0;
    width: 100%;
    height: 20%;
  }
      
  .title-text-youtube {
    z-index: 22;
    position: absolute;
    top: 7%;
    left: 7%;
    width: 98%;
    color: #fff;
    text-shadow: 0.5px 0.5px #646569;
    transform: translate(-5%,-5%);
  }

  figure {
    cursor: pointer;
  }


  @media only screen and (min-width: 992px) {
    .title-text-youtube {
      font-size: 1.125rem;
    }
  }
    
  @media only screen and (max-width: 767px) {
    .mobile-img-display-none {
      display: none;
    }
    .title-text-youtube {
      font-size: .8333rem;
      line-height: 1;
      top: 10%;
    }

    .title-text-youtube-background {
      height: 30%;
    } 
  }

//adds visible tabbing to the play button instead of the <a> surrounding it.
#videoButton {
  display: block;

  &:focus {
    outline: none; 
  }
  
  &:focus-visible .brand-play-button {
    border: 2px solid #272827;
    border-radius: 1.25rem;
  }
}
  // play buttons
  .brand-play-button {
      z-index: 21;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30%;
      max-width: 170px;
      transform: translate(-50%, -50%);
      -webkit-transition: -webkit-filter 0.3s ease;
      transition: -webkit-filter 0.3s ease;
      -o-transition: filter 0.3s ease;
      transition: filter 0.3s ease;
      transition: filter 0.3s ease, -webkit-filter 0.3s ease;
      cursor: pointer;

      &:hover { 
        -webkit-filter: brightness(.8);
        filter: brightness(.8);
      }
  }
    
  .lightButton {
    .st0 {
      fill: #fff;
    }
    .st1 {
      fill: #f2f2f2;
    }
    .st2 {
      opacity: 0.3;
      fill: #adadad;
    }
    .st3 {
      fill:none;
      stroke: #fff;
      stroke-width: 11.6965;
      stroke-miterlimit: 10;
    }

    .brand-play-button:hover {
      -webkit-filter: brightness(.85);
      filter: brightness(.85);
    }
  }
</style>




EXAMPLE CODE FOR MODAL (create your lazy load block, copy the html and place it inside card modal WYSIWYG field)

<div class="youtube-lazy-load">
					<figure id="figurejibiBTbpDrQ" class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9">
						<div class="wp-block-embed__wrapper">       
							<div tabindex = "0" id="videojibiBTbpDrQ" class="youtube" data-embed="jibiBTbpDrQ" aria-label="Play video - Bob Batt | Improving Health Care Operations and Outcomes | Wisconsin School of Business">
								<div class="title-text-youtube-background"><p class="title-text-youtube" id="titlejibiBTbpDrQ">Bob Batt | Improving Health Care Operations and Outcomes | Wisconsin School of Business</p></div><svg class="brand-play-button lightButton" alt="play button icon" aria-labelledby="titlejibiBTbpDrQ" version="1.1" id="videoButton" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" xml:space="preserve"><g><circle class="st2" cx="249.9655" cy="249.2184" r="237.931"></circle><g><polygon class="st0" points="190.4828,136.6834 190.4828,249.2184 358.1911,249.2184 "></polygon><polygon class="st1" points="190.4828,361.7533 190.4828,249.2184 358.1911,249.2184 "></polygon></g><circle class="st3" cx="249.9655" cy="249.2184" r="237.931"></circle></g></svg></div></div></figure></div>





JAVASCRIPT (place this below card modal block, in an HTML block)
<script>
 // JS for Video in Card Modal
    let modalWithVideo = document.getElementById("Modal-2-block_7faf3c3dfcd424a179de872fc2b1f9fe");

		// loads youtube api
		var tag = document.createElement('script');
		tag.src = "https://www.youtube.com/iframe_api";
		var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
		let lazyPlayerjibiBTbpDrQ = null;

		var youtube = document.getElementById("videojibiBTbpDrQ")

		//replaces placeholder div with YouTube thumbnail or image override
		var source ="https://business.wisc.edu/wp-content/uploads/2024/08/Bob_T2L3-Thumbnails_Directory.jpg"
		var image = new Image();
		image.src = source;
		image.alt = "Youtube Thumbnail for Bob Batt | Improving Health Care Operations and Outcomes | Wisconsin School of Business"; //Tells screenreaders that the image is labelled by the title of video
		youtube.appendChild( image );            

		youtube.addEventListener( "click", replacevideo  ); 
		youtube.addEventListener( "keyup", replacevideo  ); 
		function replacevideo(e) {
			if (e.type == "click" || e.key === 'Enter' || e.key === ' ') {
				// Added to remove extra space above video
				var element = document.getElementById("figurejibiBTbpDrQ");
				element.classList.add("wp-has-aspect-ratio");

				//creates iframe
				var iframe = document.createElement( "iframe" );                       
				iframe.setAttribute( "frameborder", "0" );                        
				iframe.setAttribute( "allowfullscreen", "" );                        
				iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
				var dataEmbed= this.dataset.embed;                        
				this.innerHTML = "";                        
				this.appendChild( iframe );


				var videoId=this.id;           
				var player = new YT.Player(videoId, {               
					height: '390',                
					width: '640',                
					videoId: dataEmbed,                
					playerVars: {                    
						'playsinline': 1,
						'rel': 0  // related videos are from same YT channel                
					},                
					events: {                  
						'onReady': onLazyPlayerReady,                
					}            
				});          
			
			}   
		}

		function onLazyPlayerReady(event) {
		//plays video upon load
			lazyPlayerjibiBTbpDrQ = event.target; 
			lazyPlayerjibiBTbpDrQ.playVideo();
		}

modalWithVideo.addEventListener('hidden.bs.modal', function (event) {
      lazyPlayerjibiBTbpDrQ.pauseVideo();
});

</script>

Implementation

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 the face is too low in the photo, you can try to crop ~100px off the top of the image inside WP media library.
  • 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 above title.
• Full width image? - makes image full width inside the modal header instead of half width.
  • Recommend using Modal Image Override field with this, to ensure the card image and modal image work well in each case.
• Modal Title Override - Use this to override the card title with different text for the modal header. This field can have more characters than the card title, but it's still best practice to keep the title short.
• Supporting Details - WYSIWYG for displaying job title, company, or majors
• Modal Image Override - Use this to override the full-width card image. It is unlikely you will need this field for circle crop images.
• Modal Text - WYSIWYG for modal body content. You will need to use inline HTML and CSS classes for styles.
  • Copy code snippets found on this page for consistent styling.

Configuration

• Number of columns - you can select one, two, or three columns. Three columns is the default.
  • 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 reduce the number of columns from 3 to 2.
• 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 our custom blocks.

Resources

• Card modal mockup in Figma