Flexible Columns with Icons and Image on Right
Layout Variant: C069
Content Type: Collection
| Teaser Title | Teaser Text | Pictures and Media | Items | CTAs |
C069 Collection | Yes | Optional | Yes | Yes | Optional |
C071 Teasers | Yes | Yes | Yes | -- | -- |
C072 Teaser (Optional) | No | Yes | No | -- | No |
Aspect Ratio:
- Picture on Collection 1:2
Expected Use:
Ideal for a digital product or service feature; also perfect for highlighting any key points with supporting visuals. A tall component that expands vertically to accommodate multiple proof points for a right-aligned product or service feature image. Optional CTA bottom aligned and centered.
- Include a C072 in the items list to include a footnote (optional).
- Add C071 Teasers as the items in the collection.
- Also see C067 and C070 for additional variants of this component.
Building the Component:
Similar to the C068 component, the C069 uses a single column of teasers that fills the left two-thirds of the component with the image on the right similar to the C068. This component is built with C071 Teasers in the Items List of the C069 Collection.
- 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 on the right of the component
- Items - add two or more teasers to the Items List. If you wish to include a C072 footnote, this is added as the last Item in the Items List.
- 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".
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