C067B Mega Flexible Icon Row with Featured Image

The examples below illustrate various options for authoring the C067B component. See the Content Authors' Guide for detailed instructions. 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 four (4) blurbs before it wraps additional items onto a new row. A grid of 2–8 (recommended max) blurb items. The blurb display depends on the order it was entered on the Items list. 
  • 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.
  • 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.
  • With or without an image. Both single or multiple row use cases are valid with or without an image. Featured image is optional and displayed center-aligned within the content area. You can have the featured image displayed before or after the callouts via the   "AlternateConfig" local settings. If this Boolean property is enabled, the image will be displayed atop of the callouts. The Default setting shows the image below the callout 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. Optional icons are displayed on top of the Item Teaser Title and Text.
    • 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 is designed to display 2 to 4 CTAs like a Page, Video, External Link or Download Document and are displayed below the callouts. 
  • The user has the option 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. For image icons such as shown on the samples, this allows usage of any background color. 
  • 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.

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 CTA. The examples below show various use cases for C067B using the four variations of the descriptive CTA icons for page, download, video, and external link.

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.

Optional Eyebrow

C067B Flexible Row with Teasers and Optional Image

Layout Variant: C067B | Item list contains Teasers with C071 Blurb (Sub-Component) as layout variant. 

Aspect Ratio Alt Text
New Content Item (1)
C071 Mega Blurb Heading Sample

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil.

New Content Item (4)
Extensive Compatibility

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo facilisis leo vel fringilla.

New Content Item (6)
Quick Control with Batch Operations

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

Alert
Smart Alerts

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

New Content Item (3)
Easy to Install & Affordable

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

New Content Item (5)
Easy-to-Use Portal

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

Piggybank
Energy Savings Features

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Porttitor lacus luctus accumsan tortor. Diam quam nulla porttitor massa id neque aliquam. Ornare massa eget egestas purus viverra.

New Content Item (2)
Keypad Lockout

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

Optional Eyebrow

C067B Flexible Row with Teasers and Optional Image

Layout Variant: C067B | Contains list of Teasers  with C071 - Mega Flexible Column Blurb as layout variant.

  • This sample displays only three (3) blurb Items.
    • Blurb text auto adjusts to fit the available content area depending on the number of items given per row.
    • Authors have the option to organize the Teasers displayed in the order they added it on the Items Section. 
  • Blurb icons are displayed on top of the text.
  • "AlternateConfig" property is not enabled ("Default" setting) and so the optional image is displayed below the callouts.
  • Two sample CTAs added: External Link and Video. These are displayed below the callouts. 
New Content Item (6)
Quick Control with Batch Operations

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

New Content Item (3)
Easy to Install & Affordable

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

Piggybank
Energy Savings Features

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Porttitor lacus luctus accumsan tortor. Diam quam nulla porttitor massa id neque aliquam. Ornare massa eget egestas purus viverra.

Aspect Ratio Alt Text
Please enable JavaScript to use this website.