Story Hover Card
For use in Full-Width containers only.
The Story Hover Card widget is used to highlight three items in a side-by-side fashion. It includes text with a rollover feature that shows additional text and a Call To Action link when hovered upon.
Story Hover Card screenshot
Visual demo
Widget standards
A layout is needed for this widget.
Do:
- Image Size: 420x560 – Ratio: 3:4.
- The focal point of the image should be towards the top.
- Use this widget to highlight or call attention to supplemental information relevant to your audience.
Do NOT:
- Use less than three story cards.
- Add more than one Story Hover Card widget to the page.
Written instructions
1. Click the Layout tab on the right of the page.
Tip! Be sure the container you are adding the story-hover-card layout to is full-width, meaning it spans the entire width of the page.
2. Add the story-hover-card layout.
3. Click "Content".
4. Add Content Block widgets into the two top layout containers.
5. Add StoryHoverCard widgets into each of the bottom layout containers.
6. Edit first content block.
7. Enter the title to be displayed above the Story Hover Cards and select Heading 2 formatting for it.
8. Click "Save".
9. Edit second content block.
10. Enter your link text (no formatting needed).
11. Highlight the text and click the hyperlink icon in the Content Block.
12. Complete the link fields as required.
13. Note: All links entered must have a Tooltip text set (located under more options). Example: If link says "View All" for the blog posts -Tooltip should say something like "View all Blog Posts".
14. Click "Insert link".
15. Click "Save".
16. Edit each Story Hover Card.
17. Template: Card.
18. Heading: Enter your heading text. Recommendation: Max 50 characters.
19. Text: Enter your description text. Recommendation: Max 75 characters.
20. Select Image. Navigate to the correct folder that the image is. Size of image is 420x560.
21. Link Text: Enter your Call To Action Text. Recommendation: Max 30 characters.
22. Link Target: a. Same window: For internal CMU pages. b. New window: For links outside of cmich.edu.
23. Link ADA text: Enter your ADA text.
24. Link to: a. Page within the site...This will take you to the page tree for selection. b. External URL…Include full URL of links outside of cmich.edu.
25. Click "Save".
Alert! Repeat the above steps for each Story Hover Card.
Save and send
- If you'd like to continue working on this page, but need to save your progress, click Save as Draft.​
- If you're finished making changes to the page, and the page is ready for review, click Send for Approval.
