Centered Navigation Banner

Layout Variant: VN015B

Content Type: Collection

Expected Use:

The VN015B component is a new variant of VN015 that allows a simple, standalone and prominent centered banner display with the option to add call to action to drive users to another page, external site or other teaseable content.  

Building a Banner:

Nothing is required in the VN015B Collection other than the teasable Item you are using for the contents of the banner and setting the Layout Variant to VN015B. The title, body copy, CTA label and image all come from the teasable Document you include in the Item list. The primary use case is for one banner (Item), but you can have up to five by adding more Items to the Items list.

• Add the Teaser Title - The main headline of your banner. 
• Add the Teaser Header - This is the optional eyebrow or mini-descriptor. 
• Add the Teaser Text - This is the optional body copy of your banner. 
• Add Pictures and Other Media - This is the background image of the banner.
• Add CTAs - CTAs are required for this component. The CTA button drives users to associated child or supporting content page.
  • The teaseable content that can be added are External Link, Page, Video, Download or a Teaser. Maximum of four CTAs can be displayed. 
  • Content are entered on the Call-to-Action-Button section. Select the "Use Linked Call-to-Action Label" radio button and drop the preferred teaseable content type. 
• Set the Layout Varian to "VN015b".
• On the Local Settings under the System Tab, the following properties must be defined to enable VN015B functionality. 
  • Add a Boolean property and label it "overlayToggle" - This setting enables and disables the background overlay for the component. 
  • Add a String property and label it "backgroundOverlay" - This setting triggers the specific overlay background them for the component. Each overlay theme corresponds to a specific string value:
    • Brand 1 Overlay: brand 1 
    • Brand 3 Overlay: brand 3 
    • Grey Alt Overlay: grey alt 
    • Grey Overlay: grey 
    • White Overlay: white 
  • Note that the "brand 2" is not used as the contrast is not sufficient for the kind of overlay that VN015B requires. 
  • For samples on the different overlay themes, please refer to the VN015B Regression Page.