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.
A region at the top of the page that houses main navigation, your brand logo, global links, and other utilities
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
A set of links that send users to each key section of your site
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, 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
Related Content Simple
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.