#  Call to Action Links 

 



 ##  

  expand\_more  

 
  

 

## How to add a Call to Action Links component

### Step 1: Add and configure a Call to Action Links component

1. Add a Call to Action Links component (see [Adding a component](/adding-component "Adding a component") for instructions on how to add a component).
2. Select the **Block Settings** tab.
3. Select a link style from the **Link Style** menu:
    1. Choose **Button-Style Link** for a link with a filled background, link text, and an arrow icon.
    2. Choose **Icon Link** for a link composed of a filled arrow icon followed by link text.
    3. Choose **Text Link** for a link composed of link text and an angle bracket.
    4. Choose **Email Link** for an email address with an envelope icon.
    5. Choose **Phone Link** for a phone number with a phone icon.

   ![Screenshot showing tab controls and the Content panel with the columns field outlined, followed by the Vertical Cards section and “Add Vertical Card” button.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-08/screenshot_CTA_links.png?itok=_gnx2PQZ) 

 

Using the **Link style preview** as a guide, choose a link style from the **Link Style** menu.7. Add an optional **Page Anchor Link** to allow for links to the Call to Action Links component (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).
8. Select the **Color Settings** tab.
9. Select a color scheme from the **Component Color Scheme** menu and review the **Component Color Scheme Preview** to see the effect of changing the color settings.
10. Select the **Content** tab.
11. Fill out the following information to include an optional introductory section for the Call to Action Links component (see [Adding a component heading](/adding-section-heading "Adding a section heading")):
    1. **Heading**: A heading that captures the topic of the component. The heading should be attention-grabbing and descriptive.
    2. **Body**: Introductory text that further describes the topic.This should only be a few sentences and should help site visitors understand what the component contains.
12. Set the heading level using the **Heading Level** menu. We recommend using H2 in most cases to introduce a new section, and H3 for subsections.

### Step 2: Add a Call to Action Link

1. Select the **Content** tab.
2. Use the arrow controls or enter a value in the **Columns** field. This value should be the number of Call to Action Links to display in a single row. To display two links in a single-row grid, set the number to 2. To display Call to Action links as a list, set the number to 1.
3. Select the **Add Call to Action Link** button.
4. Fill out the following information:
    1. **Link text:** Short descriptive text. This should be self explanatory to help site visitors know where the link will take them.
    2. **URL:** The link destination. This can be either the title of other site content or an external URL.
5. Once you have completed your Add Call to Action Link item configuration settings, choose **Save** to save the **Call to Action Link** item.

### Step 3: Save Call to Action Links component

1. Preview the Call to Action Link item in the **Call to Action Links** section of the **Create new Call to Action Links** dialog. You can add more Call to Action Link items by clicking the plus sign next to the first Call to Action Link item.
2. Once you have finished adding Call to Action Link items, choose **Save** to save the Call to Action Links component.



 

---

 

##  Learn more about Call to Action Links 

 



 ### Examples

Demo Site

See examples of the Call to Action Links component on the [Academics page](https://drupaldemo.harvardsites.harvard.edu/academics#example-cta-links) and the [Centers and Initiatives page](https://drupaldemo.harvardsites.harvard.edu/centers-and-initiatives#example-cta-links) of the Department of Rocket Science demo site.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/Firefly%20rocket%20in%20space%209486.jpg?itok=zBGEAUN2) 

 

 

 

 ### Best Practices

Design System Website

Learn [best practices for using the Call to Action Links component](https://designsystem.hsites.harvard.edu/call-action-links) from the Harvard Digital Design System website.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2025-03/DSWebsiteIconNew.png?itok=HPgxFa1d) 

 

 

 

 ### Accessibility

Digital Accessibility Website

Review guidance on [writing helpful links](https://accessibility.huit.harvard.edu/write-helpful-links) from the Harvard Digital Accessibility website.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/thumb_das.png?itok=j55tHWpY) 

 

 

 

  

 

 

 

 



 

 See also:- [ Components ](/site-section/components)
- [ How-tos ](/content-structure/how-tos)