Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

For the cards

...

Additional modal text content options:

  • pullquote
  • gray horizontal rule
  • microtitle (yellow triangle, subhead styled as all caps and dark blue)

Image Modified


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

...