# Call to Action Links ## expand\_more Purpose of 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. ![Call to action links in page layout](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/Call%20to%20action%20links_1.png?itok=a3nzMdle) *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… SortYour goalUse this componentEmphasize 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. [ Learn about Universal Design arrow\_circle\_right ](https://universaldesign.ie/about-universal-design/the-7-principles) [ Learn about Web Content Accessibility arrow\_circle\_right ](https://www.w3.org/WAI/standards-guidelines/wcag/) [ Explore an example methodology arrow\_circle\_right ](https://inclusive.microsoft.design/) ## Elements of Call to Action Links SortElementPurposeSection 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 SortFeatureStandardOptimized 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 See also:- [ Components ](/page-categories/components) ## Call to Action Links Showcase ### Call to Action Links component with button-style links expand\_more This example shows the Call to Action Links component with a section heading and a row of button-style links. #### Foundational Principles and Guidelines An effective practice of accessible and inclusive user experience design is built on a foundation of established principles, guidelines, and standards. These resources will guide you to creating digital content and experiences that can be enjoyed by everyone, including people with disabilities. [ Learn about the Principles of Universal Design arrow\_circle\_right ](https://universaldesign.ie/about-universal-design/the-7-principles) [ Learn about the Web Content Accessibility Guidelines arrow\_circle\_right ](https://www.w3.org/WAI/standards-guidelines/wcag/) [ Explore an example methodology for inclusive design arrow\_circle\_right ](https://inclusive.microsoft.design/) ### Call to Action Links component with icon-style links expand\_more This example shows the Call to Action Links component with a section heading and a row of icon-style links. #### Foundational Principles and Guidelines An effective practice of accessible and inclusive user experience design is built on a foundation of established principles, guidelines, and standards. These resources will guide you to creating digital content and experiences that can be enjoyed by everyone, including people with disabilities. [ arrow\_forward Learn about the Principles of Universal Design ](https://universaldesign.ie/about-universal-design/the-7-principles) [ arrow\_forward Learn about the Web Content Accessibility Guidelines ](https://www.w3.org/WAI/standards-guidelines/wcag/) [ arrow\_forward Explore an example methodology for inclusive design ](https://inclusive.microsoft.design/) ### List of Call to Action Links with text-style links expand\_more This example shows the Call to Action Links component as a list of text-style links. [Learn about the Principles of Universal Design chevron\_right](https://universaldesign.ie/about-universal-design/the-7-principles) [Learn about the Web Content Accessibility Guidelines chevron\_right](https://www.w3.org/WAI/standards-guidelines/wcag/) [Explore an example methodology for inclusive design chevron\_right](https://inclusive.microsoft.design/)