Call to Action Links
Provide prominent links that guide users to the next step
This component highlights key actions within a page, helping users move forward in a task or journey.
Example page context showing where Call to Action Links are typically used
✓ Use this component when:
- You need to emphasize one or more clear next steps
- Users are expected to take action from the page
- Links should stand out visually from surrounding text
- You want concise, action-focused language
✕ Avoid using this component when:
- Links are secondary or inline within body text
- You need equal-weight navigation items (use Button-Style Cards)
- You are highlighting a single feature with imagery (use 50/50 Card)
- The action requires detailed explanation
Choosing between similar components
If your goal is…
| Your goal | Use this component |
|---|---|
Emphasize a next step | Call to Action Links |
Provide quick links or actions | Button-Style Cards |
Feature one story, event, or initiative | 50/50 Card |
Include simple inline links in text | Text |
Call to Action Links overview
A Call to Action link (CTA) is a prominent link that includes link text and an icon. The Call to Action Links component is a group of CTAs displayed as a list or grid, marked with an optional section heading summarizing the topic and a brief description.
Example: Guiding users to key next steps
This example shows Call to Action Links used to direct users toward clear next steps. Each link uses concise, action-oriented language to help users understand what will happen when they click.
Elements of Call to Action Links
| Element | Purpose |
|---|---|
Section heading | Summarizes the topic with a heading and brief description |
Link text | Describes the link destination |
Icon | Displays on the right or left side of the link |
Guidance on using Call to Action Links
- Use to signpost user journeys. Signpost the start of a user journey with a link that uses active voice and has extra visual emphasis.
- Limit choices. Use one distinct CTA for each user journey. Less is more.
- Provide standalone links. The best CTAs are self-explanatory.
- Use clear language. Provide short, concise, and descriptive link text.
- Use action-oriented language. Start links with a prompt to take action.
- Provide details when needed. Include a section heading when users need more context than CTAs alone.
Content guidelines
Write concise link text
Keep link text brief while clearly describing the destination.
Avoid vague language
Replace generic labels like “Learn more” with specific action phrases.
Provide context when needed
Include a short section heading when additional explanation supports the links.
Use consistent tone
Maintain a consistent voice across all CTAs in a group.
Accessibility considerations
- Ensure sufficient color contrast
- Use descriptive link text
- Avoid relying solely on icons to convey meaning
- Maintain logical focus order for keyboard navigation
Call to Action Links features
| Feature | Standard |
|---|---|
Optimized color contrast | Minimum Contrast |
Background color, icons, and underlining used to indicate links | Link Indicators |
Sans serif typeface used for CTA links | Wayfinding Font |
Borders included with CTA icons | Element Borders |
Optimized color contrast for CTA links | Minimum Contrast |
Call to Action Links Showcase
This example shows the Call to Action Links component with a section heading and a row of button-style links.
This example shows the Call to Action Links component with a section heading and a row of icon-style links.
This example shows the Call to Action Links component as a list of text-style links.