Mega Flexible Icon Row with Featured Image

Layout Variant: C067B

Content Type: Collection

Expected Use:

The new flexible two-column component allows authors to pair short, snappy pieces of information (with icon imagery) alongside longer-form content and an optional CTA. This component allows row display of blurb tiles above or below optional images. 

C067B is a variation of C067 component. C067B also utilize the large headline to write a brief value statement of the product or service offered, and dedicate the smaller subcopy 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 to two sentences that describe that point. Icons should visually represent their corresponding proof points.

• Add C071 Teasers as the items in the collection.
• Also see C067,  C069, C070 and C090 for additional variants of this component.

This component is best used to list out and concisely explain key product or service features. 

Building the Component:

You can construct this component with the following possible options:

• Best used with format that has an image and picture icons that works with any background.
• The callouts flow from left-to-right and are left aligned. Each row displays maximum of four (4) blurbs before it wraps additional items onto a new row. A grid has 2–8 (recommended max) blurb items.
  • There is no content limit or maximum character restrictions to blurb items, however blurb item content should ideally be kept concise and focus on short, high-level callouts.
  • When working in rows you have equal row width as the blurb items have min- & max-widths flexing in size from 1/3 (for 2-3 up) to 1/4 (for 4+) the available content area, minus content gutters, to adapt to the number of items in a given row.
• With or without an image. Both single or more rows use cases are valid with or without an image. You can have the featured image displayed before or after the icon grid. 
• With or without icons. Icons should only be used where they add to the explanation (eg. numbers that are related to points on the image.) of the callout. 
  • Featured relevant icons should follow Emerson iconography. Icons have specific uses within the Support section, the Services user journey, and for social media. Consult with your Content Governance team for accepted uses.
  • Icons are typically assigned to specific sections of the site. Avoid using outside of these sections unless you’ve consulted with the Content Governance team.
• C067B does not have C072 Flexible 3-column Footnote functionality. C072 is a sub-component of C067, C068, C069 and C070, this text block provides the opportunity to add disclaimers and special notes.

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.

To create the C067B Mega Flexible Row with Featured Image collection, the component should contain the following: 

• Create a new Collection
• Add a Teaser Title for the Heading of the component
• Add an optional Eyebrow Label or mini-descriptor
• Add optional Teaser Text for the subheading
• Add optional CTA. 
  • C067B is designed to display 2 CTAs but can handle max of 4 CTAs which can be a page, download, video or external link. These 2-4 CTAs are displayed below the callouts. 
  • You can add CTAs under the Teaser Options section by selecting "Use Linked Call-to-Action Label" and dropping the desired teaseable content on the "Type here to search or drag and drop content on this area". 
• Select the C067B - Flexible Icon Row with Image as Layout Variant
• Optional: include a Picture if you wish to have a technical image or featured image. Featured image is optional and displayed center-aligned within the content area.  
  • If you wish to display the image between the subheading and the callouts, on the Local Settings under the System Tab, add the "enableAlternateConfig" Boolean property and click on the box under the value to enable the property. The Default setting shows the image below the callouts.
• Add C071 Teasers directly to the Items list in desired order you want it displayed by row as it will flow from left to right. This is the default functionality for Teasers directly added to the C067B Items list.The tiles auto adjust to the defined maximum length and adapts to the number of callouts in a given row.
• Optional: You have the option to modify the background color of the component. However, if static icon assets with a fixed dark color are used, it is recommended to only use default White or light background color configurations. 

SPECIAL NOTE: While not specifically called out, you may add one to four 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. Teasable Items can be a Page, Video, External Link or Download. 

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.
  • If static assets with fixed dark color are used as icons, it’s recommended to only use default White, Grey, and Brand Accent background color configurations with this component.
  • Other images works well any Background color options.
• Set the Layout Variant to C071