Image Card Callout
For use in the main body or full-width layouts.
The Image Card Callout widget is used to display links in a visually appealing way. The widget uses an image for the background and a gray area for link text.
Image Card Callout screenshots
One wide:
Two wide:
Three wide:
Visual demo
Widget standards
A layout is needed for this widget.
Do:
- Desktop Image Size: 600x400 - Ratio: 3:2.
- If placing more than two cards on the page use the two or three column layout to divide the container.
- Two column layout = grid 6+6.
- Three column layout = grid 4+4+4.
Do NOT:
- Exceed the recommended character limits for the text fields. The text will expand and obscure the background image.
- Use the Image Card Callout widget in place of text paired with a button or hyperlink. Carefully consider which will be the best user experience for your audience.
Written instructions
1. Add the layout as needed, depending on how many cards you have.
2. For two-wide, use the grid-6+6 layout and for three-wide, use the grid-4+4+4 layout.
Tip! For more than two Image Card Callout widgets, add the layout to "Drop here contentplaceholder 1" container on the page. This container is in the full-width area.
3. Insert as many of the Image Card Callout widgets needed into the layout column placed on the page.
4. Click "Create content".
5. Template: Card.
6. Heading: Enter heading text. Recommend max 75 characters.
7. Description: Enter description text. Recommend max 150 characters.
8. Image: (optional) - Select your image from the image library. Image size: 600x400!
9. Link Text: Enter your Call To Action link text. Recommend max 30 characters with spaces.
10. Link Target: Select your option based on criteria: a. Same Window: for internal CMU pages. b. New Window: for external pages not within cmich.edu.
11. Link ADA title: Enter your link text for ADA compliance.
12. Link to: a. Pages within the site… i. This will take you to the page tree for selection. b. External URL... i. Enter the full URL of the link outside of cmich.edu.
13. Click "Save".
Alert! Repeat steps for each Image Card Callout.
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.
