Component overview
The Callout component is a full-width container with a changeable color overlay that sits on top of a background image, text and a button. It is a visual way to present content and attract a user's attention.
- Callouts should be used primarily on Section Fronts: Callouts should primarily be used on Section Fronts, but can have secondary uses on Section Detail or Profile Detail pages.
- Callouts may be used as page headers: Callouts may be used as headers on Section Fronts because there is an H1 option for the title field.
- Static size: The Callout component has a set size and does not flex to the text placed in the component.
- Consider the background image you select: The image should match the purpose of the content within the Callout component.
- Background image size: The background image must be 1200x500px.
- Multiple text placement options: You may position Callout component text to the left, center or right.
- Be mindful of text wrapping: The Callout component description field's text wraps as the length of your text increases. Consider how the wrapping will look on different screen sizes.
- No WYSIWYG: The Callout component does not have a formattable WYSIWYG get field. Be mindful of how you want your content to appear in the component.
- You may use different color overlays on the Callout component: The overlay color options include blue or gray. Think about how your color choices convey information and may look on different devices (e.g., mobile, desktop).
- You can grayscale the background image: Be mindful of how your text looks with the selected image and overlay color.
- Use H-tags properly: The Callout component does allow for H1 tags. Please do not introduce a second H1 on a Section Detail page by using a banner.
- You must include an alt-text with the background image: Although the Callout component uses a background image, you must include an approved alt-text for the image.
- Button links and anchor text must be unique: Make sure the anchor text and link for the component's button is unique to avoid a duplicate destination link error.
- Button link anchor text must be descriptive: You may not use text such as "Learn More," or "Click Here" as your anchor text. Instead, use a descriptive verb to catch the user's attention, such as "Submit a Proposal" or "Learn about housing options."
The required image size for Callout components is 1200 x 500 px.
CALLOUT: UNIT NAME - Purpose.
- Example: CALLOUT: PARENTS - Visit Campus
Example Callout components
Example #1
Callout, with blue background, center text and grayscale image
Get to know the University
See impressive buildings and beautiful scenery, but more than that, you鈥檒l realize there is so much more going on on campus than you realized.
Example #2
Callout, with blue background, center text and grayscale image
Get to know the University
See impressive buildings and beautiful scenery, but more than that, you鈥檒l realize there is so much more going on on campus than you realized.
Example #3
Callout, with blue background, text right and color image
Get to know the University
See impressive buildings and beautiful scenery, but more than that, you鈥檒l realize there is so much more going on on campus than you realized.
Example #4
Callout, with gray background, text left and color image
Get to know the University
See impressive buildings and beautiful scenery, but more than that, you鈥檒l realize there is so much more going on on campus than you realized.
Have questions? Need website assistance?
Email us at: cms@unr.edu