Flexible Columns with Icons (Teasers) and Centered Image

Layout Variant: C070

Content Type: Collection

Aspect Ratio: 

• Picture on Collection 1:2

Expected Use:

The C070 offers the opportunity to highlight a feature image front and center, flanked by supporting product or service value props. Utilize the large headline to write a brief value statement of the product or service offered, and dedicate the smaller H2 copy to name the offering and additional value that leads into the proof points below. Supporting points should have headers that either describe a feature or a benefit and one sentence that describe that point. Proof points in both columns are left aligned, and icons are top aligned to their corresponding points.

• Include a C072 in the items list to include a footnote.
• Add C071 Teasers as the items in the collection.
• Also see C067 and C069 for additional variants of this component.

Building the Component:

Similar to the other flexible column components, the C070 is built with two collections of C071 teasers. If you wish to use a single teaser or single column of teasers you should use the C070 component or another single column component design. You can find other components for more complex use cases (C070, C067).

• Teaser Title - this is the tile headline of the component.
• Teaser Text - there is an optional sub-headline for this component
• Pictures and Media - this is the image shown in the center of the component between your two columns of teasers
• Items - add two collections to the Items List. This allows two columns of teasers to be added to your component. The collections do not have a Layout Variant (set to Default). You can have any number of C071 teasers in each of the two collections. While it is possible to add just one collection, this is not the intended usage and does not look well balanced. If you wish to include a C072 footnote, it should be included in the Items List of the C070 Collection as the last item in order to appear correctly at the bottom of the component.
• CTAs - You may add one or two CTAs to the bottom of the component by selecting the "Use Linked Call-to-Action Label" and adding a teasable item (or items) that have defined CTAs. To use two CTAs and define them, you will need to select "Use Custom and Linked Call-to-Action Lablel".

GOVERNANCE: The use of this component is not a standard selection for most approved layouts and should be discussed with your platform lead before using. Further, the use of icons in any use case of this component must also have governance approval before publishing. If you feel you have a different use case than shown here you must seek governance approval from your platform leader.

Creating C071 Teasers for callouts:

• Create a new Teaser
• Add a Teaser Title for the heading of the callout
• Add Teaser Text
• Optional: Add Picture (icon). Again, note that the icon should be representative of and add value to the text in the callout. 
• Set the Layout Variant to C071

Creating C072 Teaser Footnote (optional):

• Create a new Teaser
• Add your footnote information to the Teaser Text
• Set the Layout Variant to C072