Action Squares

Layout Variant: VN002

Layout Variant: VN003

Content Type: Collection

Aspect Ratio: 

• 1:1

Expected Use:

The primary use of VN002 is to showcase important next steps but without imagery. The Component features a headline and a short descriptor, plus a clickable arrow. A minimum of two horizontal boxes that suggest next steps. Each box contains a headline referring to the title of the featured topic, and can include short descriptor copy beneath it with a click-able arrow or link to the page on which the action may be accomplished. Using more than four squares will create a “Show More” button at the bottom of the first row of squares.

VN003 is similar to VN002 but with images above the titles. Select images with a central focal point to assure context remains on the mobile version. Ideally, use the teaser image from the page to which it links. Using more than four squares will create a “Show More” button at the bottom of the first row of squares.

Building the component:

The only field that requires text in the VN002/VN003 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 visual navigation to the Items list in the VN002/VN003 and set the Layout Variant to VN002 or VN003. The title, body copy, CTA label and image for each navigation tile all come from the teasable documents you include in the Items 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 would like to add images on top of the navigation tiles, you should choose the VN003 version.

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. If you enter 1 to 4, the square teasers are displayed. If more than 4 is entered, a "show more" button automatically appears. Be sure that each of your teasers or external links items have pictures associated with each. Your teasable Item should contain the following:

• Teaser Target - when using a Teaser, the Teaser Target contains your teasable content.
• 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 top 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. Your item is the CTA target. 
• On the "Background Color" section, you have the option to pick and choose a background color for this collection.