Flexible 2-Column Feature with Icon Grid

Layout Variant: C091

Content Type: Collection

Expected Use:

A flexible component used for highlighting multiple product features, benefits or proof points alongside a variable length copy block grounding the narrative of the given topic or theme of the page section with informative description text.

The C091 allows content editors to flexibly author a variable amount of content as appropriate to help illustrate to users the features and benefits of the given software, service or product offering topic of the page or page section. It consists of an optional section eyebrow label, section heading and descriptive body copy, optional CTA and between 2 to 8 (recommended max) concise feature/benefit blurb callouts, each including a topic-relevant icon, title and teaser text. The blurbs are setup using Teasers with C071 - Flex 3-Column Blurb (Sub-Component) layout variant.   

• Add C071 Teasers as the items in the collection.
• Also see C065, C067, C067B, C068, C069 and C070 for alternate options for this component.

This component is best used to explain in-depth user benefit narrative and call out 2 or more features or proof points related to a product, software or service offering.

General Information:

You can construct this component with the following possible options:

• No categorization of column is defined.  The left column displays the optional Teaser Title, Teaser Header, flexible Body Copy and CTA. The right column displays the callouts. 
• Callouts display the optional Teaser Title of the Item and flexible Body Copy as subheading.
  • The callouts flow from left-to-right based on the order the author entered it on the Items. 
  • Each row displays two (2) blurbs before it wraps additional items onto a new row and so on. A grid of 2–8 (recommended max) blurb items.
• When working with columns you have equal column width but column height varies. The tiles auto adjust to the defined maximum length and adapts to the number of items in a given row.
• 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
  • Note that if icons used are static assets with a fixed dark color, it’s recommended to only use default White, Grey, and Brand Accent background color configurations with this component. Image icons are flexible and can be displayed using any background color. 

SPECIAL NOTE: While not specifically called out, you may add one to four CTAs below the body copy by selecting the "Use Linked Call-to-Action Label" and adding a teasable item (or items) that have defined CTAs. The examples below show various use cases for C091 using the four variations of the descriptive CTA icons for page, download, video, and external link.

Building the Component:

This component should contain the following. 

1.  Add Teaser Title – This is the Section Heading of the component.

2.  Add the Header - This is the optional Eyebrow Label displayed above the Teaser Title. 

3. Add the Teaser Text - This is the optional Body Copy of the component.

4. Add CTA - This Optional CTA button drives users to associated child or supporting content page. The teaseable content that can be added are External Link, Page, Video or Download. Maximum of four CTAs can be displayed. 

5.  Teaser Header and Pictures or Other Media are not used in this collection. They come from the added C071 blurbs from Teasers or Collections. 

6. Add the Teaseable Items  - Add about  2 to 8 (recommended max) concise feature/benefit blurb callouts, each including a topic-relevant icon, title and teaser text. This can either be a teaser with C071 layout variant. Below are the steps to setup. 

• Teaser with C071 layout variant  
  • Create a new Teaser
  • Add a Teaser Title for the heading of the callout (blurb)
  • Add a Teaser Text and icon.  
  • 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".
  • Teaser Target, Teaser Header, Teaser CTA Label, CTAs are not used in this component.
  • On the Local Settings under the System Tab, ensure that the "callToActionDisabled" is enabled.

7.  Set Layout Variant to ‘C091’.