Skip to main content

Title

Global Components

CANVAS provides a number of site-wide elements that are available on every page across your site.  These elements are referred to as global elements.

 

Available Global Components

To provide a consistent look-and-feel and overall navigation for your site, we’ve created key Global Components that live on every page.

Header

A region at the top of the page that houses main navigation, your brand logo, global links, and other utilities

 

Footer

A region at the bottom of the page that contains a row of global links, an optional simple or complex navigation menu, and a legal copy line

 

Main Navigation

A set of links that send users to each key section of your site

 

Mega Menu

An optional global component for desktop only that displays multiple levels of navigation links as well as other content, like touts, images, products and article callouts

 

Touts

Touts, also referred to as call-outs, are used to promote content throughout your CANVAS site.  Touts must always have a headline and call-to-action, with options for promotional imagery, supplemental copy, and drop-downs.  Touts come in a variety of sizes and layouts to help meet your unique brand needs.  Learn more in the Tout Section of the Design Style Guide.

 

 

Non-Supported Browser Banner Component

When users visit your brand site from an outdated web browser no longer supported in CANVAS, they will see a Non-supported Browser Banner to let them know that their experience may be less than optimal. 

 

Related Content Component

The Related Content Component can be used throughout key pages of your site to visually display additional relevant content that a visitor may be interested in exploring. This feature has two formats - simple and complex. If you choose to load in four piece of content or less, the simple format will display. When more than four pieces of content are populated in the component, the complex format will display. The Related Content Component can be placed on the following CANVAS pages and will display below the main page body of content:

  • Article Detail Page
  • Audio Detail Page
  • Calculation Quiz Detail Page
  • Image Detail Page
  • Poll Detail Page
  • Product Detail Page
  • Test Your Knowledge Quiz Detail Page
  • Test Your Knowledge Quiz Result Page
  • Video Detail Page

The Related Content Component can be populated with related content for the following types of content:

  • Related Article
  • Related Product
  • Related Basic Page
  • Related Video
  • Related Image
  • Related Audio

For each type of content above, an image and a clickable title will display. When images are not available from the source page, the Related Content Component will display a snippet of text instead, which is limited to 275 characters on desktop and 150 characters on tablet and mobile.

 

Related Content Complex

See a demo of the complex template

 

Related Content Simple

See a demo of the simple template

 

Best Practices & Guidelines

It’s all in a name

Make it easy for users to find what they’re looking for by explicitly naming section labels

Simple vs. Complex

Certain components contain have simple and options for navigation. Choose the option that’s right for your audience based on the depth and breadth of your content.

 

Template PSBs

Access the PSB files for your Global Site Elements Templates.

Responsive Design

CANVAS sites fluidly respond across three key breakpoints.

See examples of page layouts, features and functionality in CANVAS.

Our demo provides a glimpse of the flexibility of CANVAS and its templates.