Flexible 3-Column Promotional Banner

Layout Variant: C063

Content Type: Collection

Aspect Ratio: 

• 2:1, 1:1, other (variable)

Expected Use:

A flexible three-column component that features supporting promotional, product benefit, or partner related content with links to child pages for additional information. This component mainly displays teasers that helps better illustrate for example a product's ecosystem (e.g., optional software integration, web/app store apps, retailers/partners, etc).

Showcases 2-3 grid items of supplemental content related to consumer-focused product benefits, partners or promotions, helping to illustrate the greater product ecosystem. Each item in the grid requires a linked image, but allows for the addition of optional body copy and text link content when needed. Component background color is also customizable and allows for White, Grey and Brand Accent Color options.

Building the Component:

For the main C063 Collection, style the collection with the Layout Variant C063.

• Teaser Title - this is the headline of your component centered at the top
• Teaser Text - there is no body copy or sub-headline used in this component
• Items - add two or three teasable Items to the Items List. The Items are intended to be Pages or Teasers to Pages. Product Teasers are also valid content. While other teasable content may function, it is not the intended usage of this component. 
• Background Color - Can be set to "Default" (white), "Legacy" (gray), or "Secondary" (dusty blue or other secondary color defined in the CSS for an extended site).

Items in the C063 Collection. Using a Teaser for this example:

• Teaser Target - add a Page or Product
• Teaser Title - no title is used for the Items
• Teaser Text - this is the body copy of the Item
• Pictures and Media - This is the image shown to illustrate the Item.
• Teaser CTA Label - if left blank, this defaults to the bundle entry for "Learn More". If anything is entered here it becomes the CTA label. Note, the Linked Call-to-Action and Custom Call-to-Action Labels do not work in this component.

Bundle Entries:

• button_read_more - shows the default CTA label as "Learn More" if no CTA Label is defined