The Text CTAs component is used to display one to three links as calls to action. These appear on a full-width gray background in a main body content area of a page.
Component Information
Benefits
- The Text CTAs component adds a gray block to a page to highlight one to three links.
- Text CTAs is a full-width component that is used in a main body area of a page or a two thirds full bleed area of a twothirds sublayout or twothirds page.
- This block’s gray background works well as a divider between white background components or next to green background components.
Live Example
Component Options and Limitations
- Links in a Text CTAs component may be displayed as text or as green buttons with white text.
- The following text style options are available for the CTAs: regular (default, blank choice), bold, italics or bold with italics.
- Text links may also display an arrow icon to the right of the text.
- Eyebrow text may be added that displays at the top left above the links. This text also has the same four text style options.
- If using the eyebrow text, a horizontal green line may be added underneath.
- Text link descriptions will not wrap to additional lines when using a green button link style. Button sizes will adjust to text size, within limits. Preview the component to ensure text displays correctly without characters cutting off.
Guidelines
- The Text CTAs component displays up to three calls to action.
- If more than three CTAs are created in the same Text CTAs component, only the first three CTAs in the list will display.
- There is not a specific character limit for the link text; however, if using the green button option, shorter text is best. Preview to ensure the text in the component displays correctly.
- Clicking on each CTA will take the visitor to the linked page within the same browser window.
- On mobile view the links stack. Be sure to test how the text looks at different display sizes and device settings and preview this stacking order.
Template Data
Eyebrow: (single-line text)
- The eyebrow is text that displays above the CTAs in the left corner.
- Eyebrows can be edited in Page Builder, Content Editor or Explorer.
- Eyebrows can be styled in Page Builder. Font options include regular (default, blank choice), bold, italics or bold with italic.
- Eyebrows are optional.
Design Tab — Page Builder only:
Manage Items
- Add new CTA
Eyebrow Style (drop-down menu)
- This setting changes the font styling of the eyebrow text.
- Options include regular (blank), bold, italics or bold with italics.
Horizontal Line (checkbox)
- When checked, a small green horizontal line will appear under the eyebrow text.
- The line will only appear if there is text in the eyebrow field.
Link Style (drop-down menu)
- This setting changes the font styling of the link text.
- Options include regular (blank), bold, italics or bold with italics.
Use Green Button for Links (checkbox)
- When checked, the text links will display as green buttons with white text.
Use Arrow Icon for Links (checkbox)
- When checked, an arrow icon displays after the CTA link text.
- The “Use Green Button for Links” option overrides this setting. If the Green Button option is checked, arrow icons will not appear, regardless of the setting for this checkbox.
Page Builder — Link Element with Standard Link Options:
Link type (drop-down menu)
- Options:
- External
- Internal
- Media
Link text (single-line text)
- This text displays as the link.
- This is the same as “Link: Description” in Content Editor.
Path (general link)
- This is a URL field with Browse button to identify the page the link will direct visitors to visit upon clicking.
Optional parameters
- This includes additional link options that are rarely used.
- Contact Comms.WebSupport@msu.edu with questions.
Content Editor:
Link (general link)
- Insert link field with standard link options.
Description (single-line text)
- Located in the Link Details
- The text here will display for the link, in either text form or in the button (depending on component settings).
Frequently Asked Questions
No, Text CTAs only display up to three links.
Instructions for Use
In Page Builder:
- Select the page in the content tree.
- Click “+” button in a Placeholder box in the main body area of the page.
- Select Text CTAs component from list.
Alternate method:
- Click Components tab at top of content tree.
- Locate Text CTAs component.
- Drag the Text CTAs component to any empty placeholder area in the main body area of the page.
Add an existing or new data source:
- To create a new Text CTAs data set:
- Select the page’s Data folder.
- Use the “+ Create new” link to make a new Text CTAs component.
- Type in a name for the Text CTAs component and hit enter.
- To use an existing Text CTAs data set:
- Select the site’s main Data folder.
- Expand the Text CTAs folder.
- Select an existing Text CTAs component from the folder.
- Click on the Assign button.
