...
- 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 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
- Character limit: ~40 characters
- 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.
- 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
...