Online Style Guide
Getting Started
Style
Colors Grids Iconography Image Guidelines Typography
Base Elements
Add to Calendar Breadcrumbs Buttons & CTAs Checkboxes Dropdowns Form Elements Hyperlinks Pagination Radio Buttons Text Elements
Components
Components Overview
Content Blocks
C001 Home Image Left w/ Copy C002 Home Image Right w/ Copy C003 Notification Popup C004 Home Ending Story C005 Feature w/ Optional Carousel C006 4-Column Product w/ Carousel C007 Compelling Story C007B Compelling Story – Content-width with Optional Group Heading C009 Latest News C009B Latest News 6-Up with Optional Background Image C010 Big Feature Image Left C011 Big Feature Image Right C012 50/50 x 2 C013 50/50 x 3 C014 70/30 x 3 C015 Utility Belt C016 Horizontal Tabs C017 Full-Width Video Player C018 Full-Width Image C019 Brands Grid C020 Multi-Column Comparison C020B Multi-Column Product Tier Comparison C022 News Teaser C023 Event Teaser C024 Featured Catalog Products C025 Video Carousel C026 Case Study Block w/ Optional Carousel C027 Table C028 30/70 Text/Image C029 Case Study Document Strip C030 General Documents & Drawings C031 Text Left with Optional CTA Right C033 Centered Feature Copy C034 Rich Copy Area C035 Featured Profile C035B Featured Profile with Rich Text Block C036 Investor Stock Quote C036B 3-Column Investor Stock Quote C037 Case Study Image w/ Caption C038 Sidebar Image w/ Optional Caption C038B Sidebar Image w/ Top-Aligned Caption C039 Sidebar Pull Quote C039B Flexible Pull Quote with Icon & Optional Attribution Text C040 Contact Info C041 Brands Listing C042 Case Study Sidebar Contact C043 Full-Width Image w/ Drop Shadow C044 Rich Copy Area Wide C045 Big Feature Left Top-Aligned C045B Big Feature Left Top-Aligned with Multi-Column Text C046 Big Feature Right Top-Aligned C046B Big Feature Right Top-Aligned with Multi-Column Text C047 Flexible Content Tile C048 Flexible Content Tile Grid C049 Blog Dynamic Feed C050 Forum Dynamic Feed C054 2-Column Table C055 Service Component Grid C057 Full-Width Accordion C059–C060 Expandable Alert/Update Tiles C061 1-Column Download List C062 Contact Spots C063 Flexible 3-Column Promotional Banner C064 Full Bleed Background Image C065 50/50 x 3 Grid C066 Centered Feature Copy w/ Image or Icon C067 Mega Flexible Multi-Column Component C067B Mega Flexible Icon Grid with Optional Feature Image C068 2-Column w/ Image Right C069 Flexible 3-column w/ Icons & Image Right C070 Flexible 2-Column w/ Icons and Centered Image C071 Flexible 3-column Blurb (Sub-Component) C072 Flexible 3-column Footnote (Sub-Component) C073 Tall Banner C074 Featured Carousel Loop 4-Up with Optional Banner Text and Background Image C075/C076/C077 Full-width Thematic Lock-Up with Featured Callout and Inset Carousel C078 Full-width Image with Hotspots C079 Featured Editorial Content Block C080 Flexible Card Grid C080B Expanded Flexible Card Grid C081 Sidebar Related Content List C082 Topic Spots C082B Topic Spots with Show More/Less Toggle C082C Topic Spots with CTA Icons C083 Latest Insights Thematic Lockup C084 Featured Expert Details Modal Card C085 Event Schedule C086 Featured Expert Carousel C086B Featured Expert Grid C087 Trending News Grid C088 Flexible Full-Bleed Card Carousel Loop C089 Featured Content with Product List C090 Interactive Timeline C091 Flexible 2-Column Feature with Icon Grid C092 Background Container Component C093 Vertical Content Tabs C094 Timed Accordion with Images C095 Featured Stats C096 Timed Content Carousel C097 Featured Content with Dynamic Sticky Image
eSpots
eSpots Overview My Account Dashboard eSpots Order Confirmation eSpots PDP Enhanced Content eSpot PDP Product Header eSpots PDP/Cart Full-width Banner eSpots (Closable) PDP/Cart Half-width Banner eSpots Quick Order Entry eSpots Shopping Cart Below-Cart eSpots Shopping Cart In-Cart eSpots
Forms
F001 In-Page – Vertical w/ Image F002 In-Page Form – Vertical F003 In-Page Form – Horizontal
Global Navigation
G001 Global Header Navigation G001B Global Header Navigation (ComRes/OAS) G001C Global Navigation Commerce Checkout Header G002 Main Navigation G003 Primary Navigation – Two-Level Menu G003B Primary Navigation Single-Level Menu G004 Utility Navigation G005 Global Cookie Notification G006 Local Mismatch Notification G007 Global Footer (Emerson.com) G007B Global Footer (ComRes/OAS) G008 Footer Primary Navigation G008B Footer Primary Navigation G008B Left Primary Footer Navigation Content Block G008B Right Primary Footer Navigation Content Block G009 Footer Secondary Navigation G009B Footer Secondary Navigation G010 Footer Social Links G010B Footer Social Links G011 Footer Social QR Modal G012 Global Header Navigation Fly-out Menu G012B Global Header Navigation Fly-out Menu G013 Global Header Navigation Non-segmented Menu G013B Global Header Navigation Non-segmented Menu G014 Global Header Navigation Segmented Menu G014B Global Header Navigation Segmented Menu G015 Global Header Navigation Segmented Menu w/ Editable Headers G016 Locale Selector Utility Modal G017 Mini Cart Menu G018 Global Site Search G019 Locale Selector Front Door G020 Logo G021 MyEmerson Sign In G022 Approved Sites Footer Promo G023 Approved Sites Footer Utility Navigation G024 Approved Sites Corporate Promise G025 Brands Dropdown Menu
Heroes
H001 Homepage Hero H001B Homepage Hero with Interactive Segment Split H001C Interactive Homepage Hero Single Segment H001D Homepage Hero Light Variant H001E Homepage Hero with Jump Links H002 Hero with Optional Carousel H002B Hero with Jump Links H002C Hero w/ Chop and Optional Carousel H002D Hero with Jump Links and Optional Video Loop H002E Hero with Foreground Image H003 Mini Hero H004 Hero No Image H005 Stock Ticker Hero H006 PLP Hero with Jump Links H008 Hero w/ Offset Copy H008B Case Study Hero with Optional Subheading & Byline H008C Hero with Offset Text and Optional Left-Aligned Image H009 Hero w/ Centered Copy H009B Hero w/ Centered Copy and Jump Links H010 Hero with Sidebar Content and Optional Footer H010B Hero with Sidebar Variant
Promos
P001 Promo Box Image Right P002 Promo Box Image Left P003 Promo Box No Image Right P004 Promo Box No Image Left P005 Promo Double Right w/ Images P006 Promo Box Big Image P007 Half-Width Accordion w/ Promos P008 Quick Links
Social
S001 Social Share Inline S002 Social Buttons Inline
Search
SE001 Handcrafted Search – Products SE002 Handcrafted Search – Brands SE003 Handcrafted Search – All Results SE004 Search Box Inline SE005 Dropdown SE006 Dropdown w/ Links SE007 Alert Banner SE008 Search Bar w/o Dropdown SE009 Search Bar with Dropdown
Visual Navigation
VN001 Navigation Tiles VN002 Action Squares VN003 Action Squares with Images VN004 Jump Navigation VN009 Featured Visual Navigation VN010 Featured Visual Navigation Banner with Tiles VN013 50/50 Segment Navigation VN014 Text-Only Navigation VN015 Featured Navigation Banner VN015B Centered Navigation Banner VN016 Category Banner – eSpot VN017 Profile Tiles VN018 Support Tiles VN019 Navigation Tiles with Offset Text VN020 Resource Dropdowns VN021 Featured Card Carousel
Layouts
Layouts Overview L001C Homepage Layout L002A Platform Landing Page – Automation Solutions L002B Platform Landing Page – Commercial & Residential Solutions L003A Industries Landing L004 Industries Segment Landing L005 Application Feature L005b Applied Solution Page L006 Expertise Landing L007 Expertise Feature L008 Technology Feature L008b Product Application Page L009 Brand Landing L010 Brand Directory L011 Category – Subcategory L011B Top-Level Category Landing L012 Product Catalog L012B Product Listing Page L013 Product Details L013B Updated Product Details Page L016 About Us L017 Careers L018 Investors L019 Search Results L021 News & Events L022A – News and Events Article – 2 Column L022B – News and Events Article – 1 Column L023A Contact Us L023B Where To Buy L024 Training L025 Portal Sign-In L026 Case Study L026B Perspectives Case Study L051 Product Services – Brands L052 Lifestyle Services – Brand Subcategory L053 Consulting Services Landing L054 Consulting Services – Subcategory L055 Project Services Landing L056 Project Services – Subcategory L057 Project Services – Phase L058 Project Services – Type L061 – Subcategory L061 Lifecycle Services Landing L080 Pre-Event Details Page L081 In-Progress Event Details Page L082 Post-Event Details Page L083 Events Landing Page (Series Summary) L086 Perspectives Landing Page L087 Perspectives Topic Page L088 Newsroom Landing Page L089 Newsroom Search Results L090 Software Parent Landing Page L091 Software Child Page L092 Country Landing Page
Quick Reference Release Archive External Resources
Share Feedback

Release Archive

Emerson.com Online Style Guide Release Notes

Subscribe to the Release Notes email to receive the latest updates sent right to your inbox.

Update #20 - Commerce Updates

This issue of the Online Style Guide Release Notes introduces a new hero component and overviews the latest updates to Product List Page and Product Details Page layouts aimed at helping to better inform and engage users, and elevate Emerson’s product offerings in organic search results.

Update #19 — New Software Components (2/2)

Following our previous update which introduced the first batch of new Software Components, this issue of the Online Style Guide Release Notes showcases the remaining six components from that group which are now available to content editors in CoreMedia. Additionally, we highlight two new layouts specifically geared toward authoring Software marketing page content, with a more modern and engaging look and feel by leveraging these new components.

Update #18 — New Software Components (1/2)

This issue of the Online Style Guide Release Notes introduces several new components now available for authoring in CoreMedia. Designed for showcasing product content on Software marketing pages, these components enable editors to flexibly feature Emerson’s software product offerings in a modern and visually engaging way with several components that incorporate compelling and dynamically interactive animations.

Update #17 — SEO & Layout Enhancements

This issue of the Online Style Guide Release Notes introduces the addition of Schema markup to the C057 in order to better leverage search engine rankings while searching for commonly asked questions. Additionally, there have been two new enhancements to existing layouts that focus on better depicting Emerson solutions by putting more focus on featured products.

Update #16 - New CoreMedia Components

This issue of the Online Style Guide Release Notes introduces two new components that enable editors to present unique forms of content in new and dynamic ways. Additionally, there is a new Promo component designed to display links and downloads more efficiently.

Update #15 - Social Share & Global CTA Enhancements

Boost the social sharing engagement of your page viewers by leveraging the enhanced authoring flexibility of the S001 Social Share component. This CoreMedia component adds more configuration and customization options so you can easily adapt it to better support your content and preferred social platforms. Explore this and and a refresh on Emerson Call To Action (CTA) styles in this update of the Online Style Guide Release Notes.

Update #14 - New Product Applications Components

Coming out of content and design enhancements for Applied Solutions and Product Applications page layouts, this issue of the Online Style Guide Release Notes introduces some new components that better enable authors to publish more robust and informative solutions- and product-focused content. These components can help further express Emerson’s expertise and excellence across our portfolio of solutions and products.

Update #13 – New Multi-Column Comparison & Read More Enhancements

This issue of the Online Style Guide Release Notes introduces a new component now available for creating rich content product comparisons, as well as several enhancements to existing components to enable more robust content and boost Emerson’s competitive presence in the SEO space.

Update #12 - New Dynamic Feed Components

In this issue of the Online Style Guide Release Notes, we introduce two new components that enable editors to feature content in Emerson.com pages from certain external Emerson-owned social and community environments. Dynamic content feeds help keep page content fresh and intriguing, and offer users a new way to explore the broader Emerson digital experience.

Update #11 – Press Release Layouts & Enhancements

As a follow up to the recent Case Study Components Recap (Update #9), this issue of the Online Style Guide Release Notes focuses on new and enhanced components now available to help keep your press release content looking fresh and engaging, and to enable even more flexibility to fit a variety of authoring needs and use cases.

Update #10 – Rich, Flexible Components: The Extended Sites Issue

Emerson’s top-rated consumer brand, Sensi, had previously designed a set of stylish marketing components on their old platform. When Sensi joined the Emerson.com platform (at sensi.emerson.com), their favorite components were re-created for use on CoreMedia. Now all businesses can incorporate these components into their own Emerson sites and/or campaigns to promote apps, news products and product specs.

Update #9 – Case Study Components Recap

In this issue of the Online Style Guide Release Notes we revisit the L026 Case Study layout and all the components available in CoreMedia to help make your case study article pages as informative and engaging to your users as possible. To see how the components listed below combine to form a robust case study page, visit the L026 Case Study Layout in the Online Style Guide.

Update #8 – Newsroom Components & Layouts

To create a more modern and engaging hub, the Newsroom incorporates a number of newly designed components to help users explore, navigate and drive deeper into specific news and resource content items of interest. In addition to the Newsroom Landing Page, the News Search Results page was designed to reimagine search result filtering and sorting, as well as become a seamless part of the Emerson Newsroom experience.

Update #7 – Rich CTA Components

In this issue of the Online Style Guide Release Notes, we highlight a couple lesser-known components each of which can pack a big punch for content authors looking for the ability to configure multiple levels of rich CTA items within a single cohesive, hierarchical structure.

Update #6 – Component Enhancements: Grids & Tiles

This issue of the Online Style Guide Release Notes focuses on enhancements made to several existing tile and grid components. These enhancements allow for more flexible authoring options to help make these components adapt to a broader set of content use cases.

Update #5 – Featured and Handcrafted Search

Take control of your search results with Featured and Handcrafted Search Results components, which give content authors the ability to highlight and prioritize specific search results for a given targeted term or phrase. Featured Search Results are available for Document, Video or Web Page (both CoreMedia and External Links) content types. For visual examples of both Featured and Handcrafted results, please refer to the L019 Search Results Layout.

Update #4 – Hotspots & Accordions: Interactive and Space-saving Components

Adding interactive options to the Emerson.com component library lets content authors place more content on the page using less space to present product benefits in engaging, modern ways. This issue highlights the components that help you do just that. From hotspots to accordions, there’s a lot to explore in this week’s newsletter.

Update #3 – Perspectives Layouts & Components: The Thought Leadership Issue

Emerson’s strategy to promote thought leadership from its engineering executives required a new set of design components that could properly showcase not only the story, but the people behind the story and related articles that would inspire customers to further explore Emerson’s causes and our solutions.

To bring these stories to life, the following layouts were designed and made available to Emerson’s Editorial and PR teams. While these layouts were designed specifically for the Perspectives content, we believe you will find additional use cases for the components highlighted in these layouts.

Update #2 – Events Layouts & Components: Make Your Events Shine

With this issue of Online Style Guide Release Notes we will focus on highlighting new and enhanced designs for Events landing pages. We have defined layouts for event promotion along with new components to highlight schedules, locations, speakers and other information about the event. The following links show you the events layouts you should follow as a guide to building your pages. While these components were designed with the specific use case for events in mind, we hope you find these rich enough to use in other cases throughout the Emerson.com sites.

Introducing The New Emerson.com Online Style Guide Release Notes

The Online Style Guide Release Notes is a new recurring communication to help keep business stakeholders and content authors informed on the latest design and component updates available for use across Emerson digital domains. Release Notes offers a snapshot of key enhancements and net new components that have been designed and implemented over the previous Planning Increment iteration, as well as tips and reminders for existing functionality, and provides readers with links to more detailed specs and authoring guidelines on the OSG and additional related resources.

Share Your Feedback