CTA Bar Component

Overview

The CTA (Call to Action) Bar provides a high-visibility layout to display one to three links on a page.

Elements

  • Link Text (1–3): The visible label for the Call to Action link.
  • Accessible Link Text (1–3): Optional secondary text used by screen readers when short link labels require additional context.
  • Link URL (1–3): The destination hyperlink for the CTA link.

Best Practices

  • Keep link text short: Keep labels concise so text does not wrap to a second line on standard screens. Use Accessible Link Text to provide full context for assistive technologies without cluttering the visual UI.
  • Use sparingly: Limit this component to a single instance per page to prevent visual clutter and maintain visual hierarchy.

Example