Component Platform: PanEmerson

PDP/Cart Full-width Banner eSpots (Closable)

Note: The following eSpots are PanEmerson and can be used on all Emerson domains with the HCL Commerce online store enabled.


HCL eSpot Name: PDPPLP_TopBanner_Marketing or Cart_TopCenter_Marketing

banner espot icon short copy

PDP/PLP Full-width Banner eSpot

Full-width Banner eSpots are displayed on top of the PDP/PLP or Shopping Cart page’s main content area, directly below the Global Navigation Header. These eSpots have a flexible width allowing them to extend across the total width of the browser window (or device viewport).

PDP Full-width Banner — Text Only eSpot Variants

Usage

• Promotion Code
• Denote issues like shipping delays
• General announcements
• Demonstration of different products
• Installation information
• New product information
• Promotional marketing for products or specials
• Extra links
• News & Events
• Outside Portals
• Compliance

Code

Text Block with White Background (No Image)

<div class="header-banner-espot white-background-with-border" data-background-color="white-background-with-border">
	<div class="padded-container">
		<div class="content-wrapper">
			<div class="text-wrapper">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, qui dolorem ipsum quia.
			</div>
		</div>
	</div>
</div>
HTML
Copy Code

Text Block with Primary Brand Color Background (No Image)

<div class="header-banner-espot brand-primary-background" data-background-color="brand-primary-background">
	<div class="padded-container">
		<div class="content-wrapper">
			<div class="text-wrapper">
				Lorem ipsum dolor sit amet, consectetur adipisicing 
			</div>
		</div>
	</div>
</div>
HTML
Copy Code

Text Block with Blue-Grey Background (No Image)

<div class="header-banner-espot blue-gray-background" data-background-color="blue-gray-background">
	<div class="padded-container">
		<div class="content-wrapper">
			<div class="text-wrapper">
				Lorem ipsum dolor sit amet, consectetur adipisicing 
			</div>
		</div>
	</div>
</div>
HTML
Copy Code

Text Block with Grey Background (No Image)

<div class="header-banner-espot gray-background" data-background-color="gray-background">
	<div class="padded-container">
		<div class="content-wrapper">
			<div class="text-wrapper">
				<b>Sed do elusmed tempor. </b>Lorem ipsum dolor sit ame, consectetur adipisicing elit, sed do elusmod tempor incididunt ut labore et dolore magna aliqua. <a href="http://www.google.com">Learn More</a>
			</div>
		</div>
	</div>
</div>
HTML
Copy Code

Text Block with Rich Black Background (No Image)

<div class="header-banner-espot rich-black-background" data-background-color="rich-black-background">
	<div class="padded-container">
		<div class="content-wrapper">
			<div class="text-wrapper">
				<b>Sed do elusmed tempor. </b>
				<a href="https://www.google.com">Learn More</a>
			</div>
		</div>
	</div>
</div>
HTML
Copy Code

Specifications

Max Characters

Body Copy: 160

eSpot Dimensions

Width: 100% (flexible)
Height: 50px (fixed)

PDP Full-width Banner — Text with Image eSpot Variants

Usage

• Promotion Code
• Denote issues like shipping delays
• General announcements
• Demonstration of different products
• Installation information
• New product information
• Promotional marketing for products or specials
• Extra links
• News & Events
• Outside Portals
• Compliance

Code

Text with Image and White Background

<div class="header-banner-espot white-background-with-border" data-background-color="white-background-with-border">
	<div class="padded-container">
		<div class="content-wrapper">
			<img src="https://via.placeholder.com/40x40" alt="icon" />
			<div class="text-wrapper">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, qui dolorem ipsum quia.
			</div>
		</div>
	</div>
</div>
HTML
Copy Code

Text with Image and Primary Brand Color Background

<div class="header-banner-espot brand-primary-background" data-background-color="brand-primary-background">
	<div class="padded-container">
		<div class="content-wrapper">
			<img src="https://via.placeholder.com/40x40" alt="icon" />
			<div class="text-wrapper">
				Lorem ipsum dolor sit amet, consectetur adipisicing
			</div>
		</div>
	</div>
</div>
HTML
Copy Code

Text with Image and Blue-Grey Background

<div class="header-banner-espot blue-gray-background" data-background-color="blue-gray-background">
	<div class="padded-container">
		<div class="content-wrapper">
			<img src="https://via.placeholder.com/40x40" alt="icon" />
			<div class="text-wrapper">
				Lorem ipsum dolor sit amet, consectetur adipisicing
			</div>
		</div>
	</div>
</div>
HTML
Copy Code

Text with Image and Grey Background

<div class="header-banner-espot gray-background" data-background-color="gray-background">
	<div class="padded-container">
		<div class="content-wrapper">
			<img src="https://via.placeholder.com/40x40" alt="icon" />
			<div class="text-wrapper">
				<b>Sed do elusmed tempor. </b>Lorem ipsum dolor sit ame, consectetur adipisicing elit, sed do elusmod tempor incididunt ut labore et dolore magna aliqua. <a href="https://www.google.com">Learn More</a>
			</div>
		</div>
	</div>
</div>
HTML
Copy Code

Text with Image and Rich Black Background

<div class="header-banner-espot rich-black-background" data-background-color="rich-black-background">
	<div class="padded-container">
		<div class="content-wrapper">
			<img src="https://via.placeholder.com/40x40" alt="icon" />
			<div class="text-wrapper">
				<b>Sed do elusmed tempor. </b>
				<a href="https://www.google.com">Learn More</a>
			</div>
		</div>
	</div>
</div>
HTML
Copy Code

Specifications

Max Characters

Body Copy: 160

Icon Dimensions

Width: 40px
Height: proportional (max 40px)
Margin-Right: 20px

eSpot Dimensions

Width: 100% (flexible)
Height: 50px (fixed)

Usage Guidelines

When To Use

Use when there’s a need to call out a single piece of content that is consistent with the usage guidelines on a PDP or landing page.

When To Avoid

Avoid using when the content does not meet the usage guidelines described above or when multiple pieces of content need to display on the page simultaneously (i.e.: Half-width Banner eSpot use cases).

Alternative Options

Half-Width PDP/PLP Banner eSpots

Share Your Feedback