Call To Action

Call to action components drive user engagement by highlighting key services, programs, and opportunities available through government websites. Use them to promote important initiatives, encourage specific user actions, and guide visitors toward essential resources. The component supports both text-only and image-enhanced layouts, with primary and secondary action buttons to create clear paths and improve user experience.

Do

  • Use compelling, action-oriented headlines that clearly communicate the value proposition or benefit to users.
  • Include descriptive body text that provides context and motivates users to take action.
  • Choose strong action verbs for button text that specify exactly what will happen (e.g., "Apply Now", "Download Guide").
  • Place strategically on pages where users are most likely to be ready to take action.
  • Use high-quality, relevant images that support and enhance the message when visual elements are included.
  • Maintain consistent styling across all call-to-action components throughout your site.
  • Test different variations to optimize conversion rates and user engagement.
  • Provide clear value propositions that answer "what's in it for me?" for users.
  • Stack the image above the text section on mobile to adapt to small viewport sizes when a horizontal layout is used on desktop.

Don't

  • Don't use vague or generic language like "Learn More" or "Click Here" without specific context.
  • Don't overcrowd pages with too many competing calls-to-action that confuse users.
  • Don't use low-quality or irrelevant images that distract from the main message.
  • Don't make promises you can't keep — ensure the destination delivers on the call-to-action's promise.
  • Don't forget mobile optimization — ensure calls-to-action work well on all screen sizes.
  • Don't neglect accessibility — ensure sufficient contrast and keyboard navigation support.
  • Don't use fear-based messaging unless absolutely necessary and appropriate for government communications.

Dependencies

The call to action component requires additional CSS dependencies to render correctly:

  • Card Component CSS: The Call To Action component extends the card component and requires the card CSS file to be loaded for proper styling. For use on external platforms, ensure that the following CSS is added separate from the GNWT Design System CSS Bundle: card.css

These dependencies are automatically resolved when using the Document component through Drupal's component system, but should be considered when implementing the component in other contexts or when troubleshooting styling issues.

Basic Call to Action

Standard call to action component with engaging copy and clear action button. Demonstrates the fundamental pattern with compelling headline, descriptive body text, and prominent primary action. Perfect for promoting government initiatives, services, or programs that require user engagement.

Explore the Northwest Territories

Discover breathtaking landscapes, vibrant communities, and endless opportunities in Canada's true north. From the aurora borealis to pristine wilderness, the NWT offers experiences you'll never forget.
Start Your Journey
Open example in a new tab

Call To Action With Image

Call to action with image and horizontal arrangement. Features a relevant image alongside information, creating visual interest while maintaining focus on the primary action. Ideal for promoting digital services or programs that benefit from visual context. This narrow-width variation is typically used within the main column on two-column layout pages.

Emergency preparedness kit with first aid supplies, radio, flashlight, and emergency blankets

Be Ready for Emergencies

We have resources for how you and your loved ones can prepare for disasters before they happen.
Prepare for Emergencies
Open example in a new tab

Media on the Right

Call-to-action with image positioned on the right side of the content. Demonstrates the horizontal layout variation where the image appears on the right while the title, description, and action button remain on the left, providing visual balance and layout flexibility for different content arrangements.

Emergency preparedness kit with first aid supplies, radio, flashlight, and emergency blankets

Be Ready for Emergencies

We have resources for how you and your loved ones can prepare for disasters before they happen.
Prepare for Emergencies
Open example in a new tab

Full-Width Call To Action With Image

Expanded call to action component designed to span the full width of the layout container for maximum visual impact. Features the horizontal image layout with enhanced spacing and prominence, perfect for landing page highlights, or major initiative promotions. The full-width treatment creates a bold, attention-grabbing element that commands user focus and drives engagement with key government initiatives or services. This full-width variation is typically used on pages or layout containers that only have one-column.

Loading preview...
Open example in a new tab

Accessibility Best Practices

Screen Reader Support

  • Descriptive headings: Call to action titles use proper heading hierarchy and provide clear context.
  • Meaningful button text: Action buttons have specific, descriptive text that makes sense when read aloud.
  • Alternative text for images: All images include appropriate alt text that describes their content and purpose.
  • Logical content structure: Information flows logically for users navigating with assistive technologies.

Keyboard Navigation

  • Full keyboard access: All interactive elements are accessible via Tab key navigation.
  • Logical tab order: Focus moves through elements in a predictable, logical sequence.
  • Clear focus indicators: Visual focus states help keyboard users identify their current position.
  • Action button accessibility: Primary and secondary buttons are easily distinguishable and accessible.

Visual Accessibility

  • High contrast ratios: All text meets WCAG AA contrast requirements against background colors.
  • Multiple visual cues: Important information is conveyed through text, layout, and visual hierarchy, not color alone.
  • Readable typography: Font sizes and line heights ensure content remains legible for users with visual impairments.
  • Responsive design: Components maintain accessibility across different screen sizes and zoom levels. Horizontal layouts adjust to a vertical, stacked layout for mobile and narrow viewports. 

Content Guidelines

  • Clear value proposition: Immediately communicate what users will gain by taking action.
  • Benefit-focused language: Emphasize outcomes and benefits rather than features or processes.
  • Appropriate urgency: Use time-sensitive language only when genuinely applicable.
  • Consistent tone: Match the overall voice and tone of your government communications.

Implementation Considerations

  • Strategic placement: Position calls to action where users are most likely to be ready to engage.
  • Performance optimization: Ensure images are properly optimized and don't slow page loading.
  • Analytics integration: Track call to action performance to optimize placement and messaging.
  • A/B testing capability: Design components to support testing different headlines, images, and button text.

Layout Variations

  • Text-only layout: Clean, focused design that emphasizes messaging and actions.
  • Horizontal with image: Balanced layout combining visual appeal with clear information hierarchy.
  • Card-based design: Contained layout that works well within content sections or as standalone elements.
  • Full-width options: Expanded layouts for maximum visual impact on landing pages.

Button Configuration

  • Primary actions: Main conversion goals with prominent button styling.
  • Secondary actions: Supporting actions with less prominent but still accessible styling.
  • Multiple actions: Support for both primary and secondary buttons when appropriate.
  • Link alternatives: Text-based links for less prominent actions or additional information.
Updated: Dec 02, 2025