Brands Grid

Layout Variant: C019

Content Type: Collection

Aspect Ratio: 

• Image from teased item: 2:1

Expected Use:

The Brands Grid showcases four or more Emerson brands, businesses in a given platform or category, or other related grouping of items such as award, partners, etc. Items now order based on their ordering in the items list of the collection. This gives the author flexibility and control over the ordering of items. 

Each grid item includes a tile label featuring an image such as a brand logo or a text label and a corresponding accordion content on hover which consists of subheading text, a short description of its mission within the Emerson family, and an optional CTA button linking to an associated web page or other related page for non-branded use cases.

Alternatively, tile labels may be configured to display authorable text titles in the featured Brand area than an image. While there is no hard limit on text title max characters, titles will automatically truncate at 3 lines of text and if it has more characters authored, it truncates with an ellipsis to display at the end of the heading.

A grid of Emerson brands in a given platform or category in alphabetical order, with each brand including a short description of its mission within the Emerson family. Alternatively, this component can be used to feature other content such as awards, businesses, partners, etc., each with accompanying description copy and optional CTA Button.

Building the Component:

The only field that requires text in the collection is the Teaser Title. This appears at the top left of the component. You will need to set the Layout Variant to C019.

Any number of brands can be displayed based on the context of where the component is used. However, C019 requires a minimum of 4 brands per design requirements. The grid will not render until the minimum has been added to the Items list. Your Component should contain the following:

• Teaser Title - The main headline on the component. This are now  authorable text tiles that can be translated into other languages.
• Teaser Text - The body copy of your component. This is not used in this component.
• Pictures and Other Media - There is no image associated with this component. Images and Other Media are on each Teaser added to the Items List.  
• Items - Add four or more Teasers to the Items List of C019. See instructions below.
• CTA Label - This is an optional feature. To set the Teaser CTA Label to "View All Brands" or link the Call-to-Action Button to the "Brands Directory" Page, use the "Use Linked Call-to-Action Label" CTA Button and add directly a Page, External Link, Download or Video or create a Teaser to hold the four variations of teasable content. 
• Set the Layout Variant to C019.

Creating Teasers for the Items List:

When hovered, the teaser will display the Teaser Title, Teaser Text and optional CTA. The CTA uses the default label "Learn More" and drives to the Teaser Target Page. Each Teaser you add needs the following:

• Teaser Target - This is the teasable content you are showing in the CTA. The "Learn More" bundle label is the default CTA. 
  • Note: In alternate use cases when used for other purpose such as simply showcasing content with images, you can exclude a target and the text will fill the entire width of the component.
• Teaser Title - This is the headline.
• Teaser Text - The description of the Teaser Target. There is no limit to the length of your description. The box will flex to expand to the size of your content.
• Teaser CTA Label - Not Used. This CTA defaults to "Learn More" bundle label.
• Pictures and Other Media - A picture of the brand name or logo.
  • This feature is optional and can be replaced with a text label display that can be translated.
  • To set the text label that will displayed on the tile, it is a must to add the "teaserBrandItemLabel" on the Local Settings under the System Tab and specify the desired label display on the value of the property.
• Call-to-Action-Button - This is an optional feature. The following properties need to be added on the Local Settings. 
  • To enable CTA display on the Teaser, add the Integer property "callToActionState" and set the Value to "2". 
  • To permit the optional CTA display, add the Boolean property "callToActionDisabled".
• Note that there are no image captions associated with this component but on hover the brand logo reveals a short brand description which is more flexible as the body copy can handle more characters.

Bundle Entries:

This component uses a CTA label that needs translated content. These can be found in one of the Bundle files which are most easily accessed on the Localization tab of the Homepage. 

• button_read_more - shows the default CTA label as "Learn More" if no CTA Label is set.