Bard College at Simon's Rock: the Early College
  1. Home
  2. Guide
  3. Patterns
  4. CTAs and Links

CTAs and Links

Use appropriate link styles to help users find what they are looking for.

Strategic pages should conclude with a link or call to action. This pattern makes it easy for the user to take the next action.  

Red Button

Use one of the predefined buttons to signal an important action.

Request Info
  1. Select Component from the WYSIWYG
  2. Call To Action
  3. Fill out Text, Link, and Title (if needed for accessibility)
  4. Select Red Button

Or

  1. Select Asset from the WYSIWYG 
  2. Select one of the buttons listed.

Double Red Button

  1. Snippett - Red Button Center
  2. Set first link text and URL
  3. Add a row
  4. Set second link text and URL
CTA Patterns Links Foundation

Small Red Arrow Link

Apply
 Use Small Red Arrow Link 

Add the small red arrow link using the following steps.

  1. Select Component from the WYSIWYG
  2. Call To Action
  3. Fill out Text, Link, and Title (if needed for accessibility)
  4. Select Link Small Red Arrow
or
  1. Add the red button (see above)
  2. Add snippet "Link Small Red Arrow"
  3. Update link text
  4. Update link URL

Large Red Arrow Link 

The Large Red Arrow Link is similar to the Small Red Arrow Link. It is larger and is used without the Red Button or any other type of red arrow link. 

 browse courses 
 
 

Add the large red arrow link using the following steps.

  1. Select Component from the WYSIWYG
  2. Call To Action
  3. Fill out Text, Link, and Title (if needed for accessibility)
  4. Select Link Large Red Arrow
or
  1. Add snippet "Link Large Red Arrow"
  2. Update link text
  3. Update link URL

Medium Red Arrow Link

There is also a medium red arrow link for longer text connected to a CTA that is not linearly connected to the rest of the copy.

  1. Select Snippet: "Column Text Column Aside"
  2. Customize body text
  3. Customize aside text
  4. Customize link URL(s)

Lead text sets up the action. Conversational tone is good.

Then give text for another option. Also an exciting option

Advance Arrow Instructions

  • Type out your text Red Arrow Link
  • Select the text and choose the link icon in the WYSIWYG which opens the link modal
    • Add the link url
    • Select the class from the dropdown: "right-arrow-primary” is the large arrow, right-arrow is the small arrow. 
    • Close modal window
  • Select text and Select Div from Paragraph Drop Down
 Use Large Red Arrow Link  

Custom Unordered List

For general links use the Arrow List Snippet. 

Bio Lists

First Last

Title

  • Insert snippet in the WYSIWYG
  • Select List-Contacts

First2 Last2

Title2

Departmental Lists

First Last

Remove this line

  • Insert snippet in the WYSIWYG
  • Select List-Contacts

Academic Affairs

Round Call Out

Square Call Out

Use Case

Use up to three boxes to highlight key information.

Links

Add links in the body of the block, not the title. Don't use red arrow links inside the boxes.

Keep it Brief

Use scannable text and keep it simple.