Language selection

Search


Promotional feature banner design pattern: Canada.ca design system

Promotional feature banners are in-page components used to promote government-wide and institution-specific activities, initiatives, programs, and services.

When to use this pattern

  • Use this component to promote timely, current activities and initiatives
  • Only use this component on navigation or landing pages; do not use with destination content
  • Do not use this component when a person’s flow must not be interrupted, as in a transactional process
  • Do not duplicate content from other promotional components on the page

How to use this pattern

  • Promotional feature banners are full-width, narrow-height components that comprise text, imagery, and links
  • A maximum of 65 characters is allowed for all text (including link label)
  • Both text and imagery must be linked, but all links in the feature banner must point to the same destination; alternatively, the entire container must operate as a single linked area
  • Textual elements must be coded as HTML text—do not embed text into imagery
  • To ensure responsiveness at varying screen sizes, do not use a single static image for this component
  • Use the defined presentation classes included in the Canada.ca WET theme
  • For image sizing details, consult the Canada.ca GitHub page

Example

Promotional feature banner pattern
Screenshot illustrating the promotional feature banner pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Page details

Date modified: