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, by pairing an exciting image with a brief description. It includes text with a rollover feature that shows additional text and a Call To Action link when a mouse hovers over.
Example of Story Hover Card:
Visual demo
Widget standards
The Card Wrapper layout is needed for this widget.
Do:
- Image size: 420 x 560 – Ratio 3:4.
- The focal point of the image should be towards the top.
- Use 3 or 4 cards per set.
Do NOT:
- Use fewer than 3 cards.
- Use more than 4 cards.
- Use more than one Story Hover Card set per page.
Written instructions
1. Click "+ Add widget"
2. Click "Layout"
3. Select "Card Wrapper"
4. Click the card wrapper layout
5. Click the editor icon on the pop up menu
6. Select the "Gray slant background" template option.
7. Add a heading to your card wrapper.
8. Optional: Add a link to the card wrapper. Click "+," "Select page or content," select your link of choice. Then, click "Use selected," "Insert link," and add an ADA title for your link.
9. Click "Save"
10. Click "Add widget here..."
11. Click "Layout"
12. Select "Section"
13. Click the section to open the black pop up menu
14. Click the margins and columns icon
15. Increase the number of columns to 3
16. Click "Add widget here..."
17. Select "Story Hover Card"
18. Add one Story Hover Card widget to each column
19. Click "The Story Card view requires a link."
20. Click the edit icon in the black pop up menu
21. Add a heading to your first story hover card. Maximum characters: 50
22. Add a short sentence of description. Maximum characters: 75
23. Click here to add a button
24. Click "Select page or content"
25. Click here to select your content type if you want a different type than "Pages"
26. In this example, we use "Programs" as the content type.
27. Click the "Narrow by typing ..." field and search for your content or navigate through the list.
28. Select your content of choice
29. Click "Use selected"
30. Edit your "Text to display" if you want it to be different than the name of the content you selected. Maximum characters: 30
Click "Insert link"
31. Add an ADA title for your button
32. Click here to choose an image
33. Click "Select an image from library"
34. Click "Default Libraries"
35. Navigate through the photo library or search for your image of choice
36. Select your image.
37. Click "Use selected"
38. Click "Save"
39. Add a heading, description, button, ADA text, and image to each of your story hover cards.
40. Review your story hover cards. Move the mouse over each to see the heading, description and button appear.
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.
