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

Additional Style & Strategy Guides

Supplemental strategy and style guides for Emerson.com and Other Approved Sites. You will be redirected to SharePoint and should be logged into your Emerson account in order to access these resources.

Configurator Style Guide

This document provides detailed visual design guidance for creating product configurators that adhere to the OneEmerson digital style.

Design Sprint Participation Guidelines

This document provides an overview and framework to help illustrate the workflow of operating within the Maintenance Design Sprints.

Emerson Digital Content Strategy

The purpose of this document is to consolidate and capture the content strategy directional framework and authoring tools for Emerson Digital Products including the website, events, and emails.

eSpots Guidelines

For content authors who need to add timely promotions or announcements on a page, this document outlines usage options.

FAQ Strategy Guide

This document provides strategic approaches for creating frequently asked questions (FAQ) that are intended to appear in the Support section of the website or as supplemental information on a Product Details Page.

Mobile App Guidelines

This document establishes a directional framework and a systematic approach for the design, implementation, optimization, and maintenance of the Emerson portfolio of mobile applications.

Forms Design Style Guide

This document provides the style guidelines, user experience principles, and “do’s and don’ts” when creating forms to gather information from visitors of the digital experience.

Other Approved Sites Style Guide

For sites that share the emerson.com domain (such as sensi.emerson.com or climate.emerson.com), this document outlines the style variations and usage exceptions available to these extended sites, referred to as “Other Approved Sites”.

Share Your Feedback