Component overview
CTA with Image combines a call-to-action button with the ability to add an image. This component is used to break up the information on the page and it is designed to entice users to interact and take an action on your page.
- CTA with Image can be used on all page schemas: Although designed primarily for the Section Front schema, CTA with Image can also be used on Section Detail, Profile Detail and Degree Detail pages. CTA with Image spans full-width on Section Fronts.
- CTA with Image requires an image, a title and a CTA button
- CTA with Image is not designed to be a header: CTA components are not to be used as headers. They are best used to break up information on your page.
- Think about strategic form placement: Think about the user experience. At what point in your page, especially on a mobile device, should a user be encouraged to take action?
- Keep title text short: The recommended length for CTA with Image titles is 50 characters.
- No WYSIWYG: CTA with Image components do not have a formattable WYSIWYG field. The subtitle field is optional. If you choose to use it, subtitles should be limited to 110 characters, including spaces. This component is not designed to convey large amounts of information.
- Use background color to your advantage: CTA with Image can have a blue, dark gray or white background. The background spans full-width on Section Fronts.
- Select an accent color for high-value CTAs: Accent colors should be used sparingly on your sites. They should be restricted to high-value, transactional CTA items (i.e. apply, request information) and not used for more generic links. Accent colors should be limited to one per page. Email cms@unr.edu if you'd like to enable an accent color on your CTA with Image.
- Images are always to the left of the content in CTA with Image components
- No H-tags options: CTA with Image component titles do not allow for H-tag use. Be mindful of your H-tag selection on the remainder of the page.
- This component employs default margins: Spacing is automatically added to both the top and bottom of CTA with Image components. You cannot toggle this spacing on or off.
- Call to Action anchor text (links) must be unique: Each anchor text must be unique to that link to ensure you do not create a multiple destination link accessibility error.
- Call to Action images must include alt-text: The CTA with Image requires an image. Images must include descriptive alt-text.
The required image size for CTA with Image is 800 x 450 px.
CTAImage: UNIT NAME - Purpose
- Example: CTAImage: GRAD - Funding
Example Call to Action with Image components
Example CTA with Image components
Example #1
Example blue CTA with Image
This is the title field.
The sub title field is optional. Recommended length is 110 characters.
Learn more about components
Example #2
Example white CTA with Image
This is the title field.
The sub title field is optional. Recommended length is 110 characters.
Learn more about components
Example #3
Example gray CTA with Image
This is the title field.
The sub title field is optional. Recommended length is 110 characters.
Learn more about components
Have questions? Need website assistance?
Email us at: cms@unr.edu