Component overview
The Call-to-Action component is a full-width call-to-action container, allowing you to place descriptive content and up to three call-to-action buttons in a single component on a page. It is designed to attract users to interact with and take an action on your page.
- CTAs are designed to focus user attention: CTA components are built specifically to have users interact with an expected next step or flow within a section or unit.
- CTAs are not designed to be headers: CTA components are not to be used as headers.
- CTAs may be used on all page schemas: CTA components may be used on Section Fronts, Section Detail, Profile Detail and Degree Detail pages.
- Container size changes with logo use: CTA components have a set size, but adjusts if you choose to include or remove the Nevada Sportwolf logo.
- Choose from three colors: CTA components can be blue, dark gray or white.
- Select an accent color for one button: 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.
- Toggle on or off the Nevada Sport Wolf logo: You may choose to include or not include the Nevada Sport Wolf logo. At this time, no other logos are available in the CTA.
- No H-tags options: CTA component titles do not allow for H-tag use. Be mindful of your H-tag selection on the remainder of the page.
- No WYSIWYG: CTA components do not have a formattable WYSIWYG field. The CTA description field has standard paragraph formatting. Be mindful of how you want your content to appear in the component.
- No default bottom margin: Be mindful if you place CTA components at the bottom of a page. You will have to manually add margin to the bottom of the component so it doesn't touch Contact components or the page's natural footer.
- Be mindful of your P-tag or H-tag selection: The CTA component has H-tag formatting. Be sure to select the appropriate H-tag for your page to ensure compliance with on-page optimization and accessibility policies.
- CTA button links and anchor text must be unique: Make sure the anchor text and link for each CTA button is unique to avoid a duplicate destination link error.
- CTA 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."
CTA: UNIT NAME - Purpose.
- Example: CTA: GRAD - Funding
Example CTA components
Example #1
Blue CTA with Sport Wolf and three buttons, accent color enabled
Get to know the University
See impressive buildings and beautiful scenery, but more than that, you’ll realize there is so much more going on on campus than you realized.
Example #2
Dark Gray CTA without Sport Wolf and two buttons
Get to know the University
See impressive buildings and beautiful scenery, but more than that, you’ll realize there is so much more going on on campus than you realized.
Example #3
White CTA with Sport Wolf and one button
Get to know the University
See impressive buildings and beautiful scenery, but more than that, you’ll realize there is so much more going on on campus than you realized.