Marketing banner

Users can enter websites from many different paths. If the website doesn't match the branding of the marketing material, it can create a disjointed user experience. This could cause users to leave the page, thinking it's not related to the campaign they saw.

The marketing banner component helps campaign/marketing messaging be more effective on a webpage. It provides a strong visual presence to draw attention to key messages or slogans.

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Media


Configure: select the dropdowns below to display the variety of options that a marketing banner supports.

Marketing block slogan

Marketing block body text.

Primary CTA Secondary CTA



Responsive preview

Usage best practices

Marketing banner allows for more creative expressions so as to elicit emotional responses and strengthen connections with The City brand. Use it to accentuate and complete the storytelling of the key messaging of a campaign. Keep the following principles in mind when using the component on a page:

  • promotional - marketing banner draws attention to campaign's key messaging and encourage the user to take certain actions
  • contextual - place the marketing banner in the most suitable area of the user interface
  • sporadic - marketing banner is moderately interruptive therefore should be used sparingly

Consider using marketing banner to:

  • visually connect page content to branded marketing materials or campaigns
  • highlight marketing key messages or slogans
  • help set the visual, emotional and informational tone

Usage examples:

  • banners on campaign pages (vs. operational pages)
  • navigational or category page banners
Marketing banner variations and features
Variation name Unique features
Marketing block

  • flexible layouts
  • fluid width; can extend edge to edge
  • image format options
  • background colour options
  • options for a slogan message as well as an additional short phrase
  • primary and secondary call to action buttons

Slogan banner

  • fluid width; can extend edge to edge
  • banner height can be changed to show more of the image
  • options for a slogan message as well as an additional short phrase


Use content that is concise and promotional.

Choose meaningful background colours to align the banner content, campaign messaging and tone.

Place the banner at the top of a page to help users connect the page with the campaign.

Use the full page width for a greater visual impact.

Use caution when using more than once on one page.


Do not use for information heavy content. Choose the content block instead.