Category Navigation Tiles

Layout Variant: VN001

Content Type: Collection

Aspect Ratio: 

• 4:3, 5:3

Expected Use:

The primary purpose of this component is to provide a grid of two or more images that link to other pages within a product category. The imagery should depict aspects of the subject matter. The hover state copy should briefly describe the product category using category keywords. The hover state offers the user the option to learn more about the product or go directly to the product catalog.

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 this component.

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 VN001. While you can use other various types of teasable content such Page, External Link, Video or Download, the intent of this component is to use Teasers to build out your navigation tiles. The title, body copy, CTA label and image for each navigation tile all come from the teasable item 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. Each navigation tile can have one or two CTAs. Instructions below will explain how to do both.

Your Teaser 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 navigation tile.
• CTAs are not used on this component as they are pulled in from the teasers added to the component. The CTA drives the tile to the key product category or catalog category pages. 
  • For one CTA target:
    • You will add a Teaser Target to your Teaser.
    • If you select "Use Default Call-to-Action Label" the CTA will default to "Learn More". Alternately you can choose ""Use Custom Call-to-Action label and set your own CTA label. 
  • For two CTA targets:
    • You will perform the same steps as above for the first CTA by adding a Teaser Target to your Teaser.
    • For the second CTA you will need to select "Use Linked Call-to-Action Label" and add a content item if you wish your primary teaser target CTA to use the default "Learn More" label. If you wish to have a custom CTA for your Teaser Target then select "Use Custom & Linked Call-to-Action Label". The CTA label for your second CTA comes from the content your added for the second target. You must add a "Teaser CTA Label" to that content or you will not see a CTA label in your navigation tile. 

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

Bundle Entry:

• button_read_more (This label is used for your first CTA label if you use the default CTA label rather than adding a Custom Call-to-Action Label.)