Maroon Background Callout
For use in a full-width area.
Use the Maroon Background Callout to draw attention to an important page or direct your audience to take action through the call-to-action buttons. You have the ability to add an image with a maroon overlay behind the callouts. This widget is a great way to link to child pages.
Example Maroon Background Callout
Visual demo
Widget standards
- No layout is needed for this widget.
Do:
- Desktop Image Size: 1800x540 - Ratio: 10:3.
- Two per page, with content in between them.
Do NOT:
- Add this widget to a container.
- Exceed 150 characters in the description area.
- Use a background image whose focal point will be obscured by the text in the widget.
Written instructions
2. Click + Add Section in a full-width area of your page. It's full width if you can see the black line stretch across the entire window.
3. In the Content tab, find the Maroon Background Callout and select it.
4. Click the widget to prompt the pop up menu.
5. Click the edit pencil icon in the pop up menu.
Configure Content
6. Add the title to the Heading field.
7. Add a description to the Description field. Do not add more than 150 characters.
8. If you would like to add a background image, click on Select image and select an image from the DAM that is 1800 pixels wide by 540 pixels tall.
Add Image and Link
9. Click the Select an image from library link.
10. Click the Default Libraries tab.
11. Select an image that is 1800x540.
12. Click "Use selected."
13. Click the + under Link #1 to add a button.
14. Click "Select page or content."
15. Click the Narrow by typing... field.
16. Search for and select your link, then chose "Use selected."
17. You can change the button text here. Then, click "Insert link."
18. Add alternative text under the ADA Title to describe your link.
19. If you'd like another button, repeat steps 13 through 18 for Link #2. The second button will be white.
20. Click "Save"
21. Save as draft.
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.
