Featured Visual Navigation

Layout Variant: VN009

Content Type: Collection

Aspect Ratio: 

• 1:1, 3:4, 20:31

Expected Use:

Featured Visual Navigation tiles can be used to introduce important sub-pages across the family of available layouts, although they are primarily used in the Expertise and Industry sections for way-finding. A minimum of two tiles must be used. Each tile contains a headline and body copy. The whole element area is clickable.

Building the navigation:

The only field that requires text in the collection is the Teaser Title. This is the tile for the overall navigation component and appears at the top left of the navigation tiles.

You will add the teasable Item you are using for the contents of the navigation to the Items list and set the Layout Variant to VN009. The title, body copy, CTA label and image for each navigation tile all come from the teasable Documents you include in the Item list. You need to have two or more navigation tiles when building this component. There is not a limit to the number of navigation tiles you can have. If you only have one navigation destination you should choose another component such as VN015.

Building the tiles (Teasers)

For the teasable Item you can use any teasable content such as a Teaser, External Link, Page, Download or Video. As always, if you use a Teaser to separate your content (best practice) you can still set your Teaser Target to any of the valid Document types such as External Link, Page, Video or Download. Your teasable Item should contain the following:

• Teaser Title - The main headline of your component (the title of the tile).
• Teaser Text - The body copy of your component. This is optional, but best practice is to include some additional body copy.
• Pictures and Other Media - This is the image on the left side of the navigation tile. 
• CTA - As the entire tile is the CTA, there is no specific CTA or text needed to be set for this 

On the "Background Color" section, you have the option to pick and choose a background color for this collection. 

Special Use Case: Tile with clickable contact hyperlinks

You can create a special tile with hyperlink(s) to contact information. This use case makes specific text in the tile clickable rather than the whole tile being clickable. This was specifically requested to allow usage as a contact card, but could have other use cases. You can have up to three linked items shown. These can be phone, email, or any other valid External Link. This also works in the right half of the C083 component.

Create a Collection with default layout variant. 

• Teaser Title - The title of the tile (same as in the standard use case above)
• Teaser Text - This is the body copy of your component. You can have one or two rows of copy here. Any additional text will be ignored. Keep this very short or you will not have space for your hyperlinked items.
• Picture - not used
• Items - only External Links will be recognized. If you add another content type it will be ignored in the display, but will count as one of your three items. If you add more than three items any additional items will be ignored. In each External Link, the Teaser Title is the text that will be displayed for the hyperlink. The URL of your External Link can be:
  • email: mailto:[email protected]
  • phone: tel:555-555-5555
  • any URL: http://www.twitter.com
  • any other valid External Link type

Featured Visual Navigation with Banner

Layout Variant: VN010

Content Type: Collection

Aspect Ratio: 

• On banner: 1:1, 16:9
• On items: 1:1, 3:4, 20:31

Expected Use:

Featured Visual Navigation with Banner can be used to introduce important sub-pages across the family of available layouts, although they are primarily used in the Expertise and Industry sections for way-finding. This is basically a combination of a VN015 and a VN009. A minimum of two tiles must be used. Each tile contains a headline and body copy. The whole element area is clickable.

Building a Banner:

While the banner looks much like a VN015 it is constructed more like a VN016. You can only have one banner at the top of the navigation tiles so it is similar to the VN016 in this way too. All of the content to build the banner is in the main collection while the navigation tiles are in the Items list.

For general use, any teasable content such as a Teaser, External Link, Page, Download or Video can be used. As always, if you use a Teaser to separate your content (best practice) you can still set your Teaser Target to any of the valid Document types such as External Link, Page, Video or Download. Your VN010 Collection should contain the following:

• Teaser Title - The main headline of your banner
• Teaser Text - The body copy of your banner. This is optional, but best practice is to include some additional body copy
• Pictures and Other Media - This is the background image of the banner
• Items - see below. Add your teasable items that will make up the navigation tiles below the VN010 banner. Minimum of two items must be added.
• CTA Label and Teasable Content - This is required for the custom CTA text shown regardless of what type of content you are teasing. This is entered in the Call-to-Action-Button section with the radio button selection of "Use Linked Call-to-Action Label" where you will drop your teasable content. Your custom CTA label is pulled from the "Teaser CTA Label" of your teasable content and not from the collection you are working on.
• Layout Variant - set the layout variant to VN010

Building the navigation:

You will add the teasable Item you are using for the contents of the navigation to the Items list of the VN010 Collection. The title, body copy, CTA label and image for each navigation tile all come from the teasable Documents you include in the Item list. You need to have two or more navigation tiles when building this component. There is no limit to the number of navigation tiles you can have. If you only have one navigation destination, you should choose another component such as VN015.

For the teasable Item you can use any teasable content such as a Teaser, External Link, Page, Download or Video. As always, if you use a Teaser to separate your content (best practice) you can still set your Teaser Target to any of the valid Document types such as External Link, Page, Video or Download. Your teasable Item should contain the following:

• Teaser Title - The main headline of your navigation tile
• Teaser Text - The body copy of your navigation tile. This is optional, but best practice is to include some additional body copy
• Pictures and Other Media - This is the image on the left side of the navigation tile
• CTA - As the entire tile is the CTA, there is no specific CTA or text needed to be set for this 

Note that on the "Background Color" section, you also have the option to pick and choose a background color for this collection.