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

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

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

Functional grouping: Media

Demo

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

Select banner type:

Select layout:

Select image height:

Select text position:

Select text length:

Select text background color:

Media display ( Default )

Select column widths:

Select column order:

Content above media on mobile

Select border style:

Select title font weight:

Select text alignment:

Enable primary call to action button

Enable secondary call to action button

Select background color:

Select image position X:

Select image position Y:

Select background size:

Select the tablet and desktop image minimum height:

Select image position X:

Select image position Y:

Marketing block slogan

Marketing block body text.

Primary CTA Secondary CTA

Code

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

Do

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.

Don't

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