Page History

Also known as: card with popup

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 

Use When

• Storytelling; sharing a person's profile or career background (examples: BBA Careers, Companies and Recruiters)
• Displaying multiple details or subtopics for 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 is 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 and/or organizing the content differently.

Editorial Guidelines

For the cards

• Limit the amount of copy in the cards, since more detail will be shown in the modal.

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

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.
• 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 including:
  • paragraphs
  • pullquotes
  • supporting images
  • photo collages
  • an embedded YT 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

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. 

...

Examples of full-width and headshot modal cards and 1, 2, 3 columns
Default Modal style. 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.
Modal with full-width image. Text overlaps image, with a dark gradient for contrast. Mobile/tablet sizes just have smaller text.

Use Cases

...

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

...

Microtitle styles for subheads (with yellow triangle)

...