Page Content Requirements
All images supplied to the content team should be under 250 Kb size to AVOID site speed issues
|
Component |
Recommended minimum image size |
Required Content |
Design Example |
| Hero image with 600p height (can also have video embedded) | 1034 X 600 px or aspect ratio of 5:3 |
A: Banner Title |
 |
| Hero image with large height (can also have video embedded) | Aspect Ratio 1:1 or about 1500px x 1500px | A: Banner Title B: Body Copy C: CTA Button copy & destination URL |
 |
| Logos on header navigation | 24px in Height | A: Any new logo should be 24px in Height or have an invisible rectangle box of 24px in Height. Perficient set horizontal spacing to 32px between the logos. |
 |
|
Component |
Recommended minimum image size |
Design Example |
| Highlight Hero Slider | Icon Image: 405 x 405px or aspect ratio of 1:1 |
 |
| Highlight Card Mobile Only Slider |
Highlight Icons: 260 x 340 px or aspect ratio of 5:7. |
 |
| Highlight Hero Mobile Only Slider | Highlight Icons: 300 x 300px or aspect ratio of 1:1 |
 |
| Highlight Hero Mobile Only Slider | Highlight Icons: 300 x 300px or aspect ratio of 1:1 |
 |
| Product Family Resources | Highlight Icons: 300 x 300px or aspect ratio of 1:1 |
 |
| Eight Up Desktop Two Up Mobile | Highlight Icons: 300 x 300px or aspect ratio of 1:1 |
 |
| Large Body Font | Highlight Icons: 300 x 300px or aspect ratio of 1:1 |
 |
| Block Well Composite Links | Highlight Icons: 100 x 100px or aspect ratio of 1:1 |
 |
|
Component |
Recommended minimum image size |
Design Example |
| Product Family Section | Right Image:
1500px x 1333px (transparent background) or aspect ratio of 5:4.4 |
|
| Product Hero Wrapper With Air Block Title | a. Top Left Category Icon: 260 x
340px or aspect ratio of 5:7 b. Background Image: 4320 x 2700px or aspect ratio of 4:2.5 c. Center Product Image: 890 x 911px (transparent background) or aspect ratio of 1:1 |
 |
| Product Hero Wrapper - Grey Block |
a. Top Left
Category Icon: 260 x 340px or aspect ratio of 5:7 b. Background Image: 4320 x 1080px or aspect ratio of 4:1 c. Center Product Image: 890 x 911px (transparent background) or aspect ratio of 1:1 |
|
| Product Hero Wrapper With Water Block Title | a. Top Left Category Icon: 260 x
340px or aspect ratio of 5:7 b. Background Image: 4320 x 2700px or aspect ratio of 4:2.5 c. Center Product Image: 890 x 911px (transparent background) or aspect ratio of 1:1 |
|
| Flex Column (Left or Right aligned) | a. L/R Background Image: 2160 x
2604px or aspect ratio of 2:2.5 b. Top L/R Side Image: 594 x 648px or aspect ratio of 1:1.1 c. Center L/R Side Image: 1290 x 903px or aspect ratio of 4:3 d. Bottom L/R Side Image: 2160 x 1284px or aspect ratio of 5:3 |
 |
| Featured Image (Left or Right aligned) |
2037 x
1146px or aspect ratio of 2:1 |
|
| 2 Column Image Highlight |
1086 x 724px or aspect ratio of 3:2 |
 |
| 3 Column Product Highlight |
(Image and description provided via pim sku) |
 |
| Logo Image Wrapper |
a. Top Left Logo:
400 x 106px or aspect ratio of 4:1 b. Top Center Logo: 398 x 100px or aspect ratio of 4:1 c. Top Right Logo: 470 x 132px or aspect ratio of 4:1.1 d. Bottom Left Logo: 300 x 80px or aspect ratio of 4:1.1 e. Bottom Right Logo: 410 x 102px or aspect ratio of 4:1 |
 |
| Two Up Slider |
Product Image:
948 x 903px or aspect ratio of 1:1 |
|
| Works with Alexa Icon in Banner (if possible, provide
with curved edges) |
474px x
144px or aspect ratio of 4:1.2 |
|
| Corporate Highlight Slick Slider -
4 Panels |
Highlight Images:
490 x 250px or aspect ratio of 2:1 |
|
| Leadership Slick Slider - 4 Panels |
Highlight Images:
360 x 260px or aspect ratio of 7:5 |
|
| Control from Anywhere |
Left Image: 450 x
724 or aspect ratio of 5:8 |
|
| Tab Left Wrapper |
1155p x
791p or aspect ratio of 3:2 |
|
| Offset Slider |
2460 x
2016px or aspect ratio of 5:4 |
|
| Content Video Image Slider - 2 Panels |
1636 x
1400px or aspect ratio of 7:6 |
|
| Content Slider Static Video Image - 2
Panels |
3238 x
1208px or aspect ratio of 3:1 |
|
| Benefits Section |
2037 x 1146px or aspect ratio of 2:1 |
|
| Win Keep Drive Benefits |
750x320 (current
provided images are 6251x4161) or aspect ratio of 3:2 |
|
| Leave it to Pros |
1333px x
1750px or aspect ratio of 3:4 |
|
| Supported Products |
Image fed in from PIM | 
|
| Video feed in |
Video image fed in by video thumbnail specified on YouTube | 
|
| Horizontal Tabset w/copy | Image from PIM | 
|
| Comparison Table | (SKUs required in order to show images.) |  |
| Horizontal Tabset with Image and Copy |
4001x1542 px or aspect ratio of 2.6:1 |
 |
| Horizontal Tabset with Interactive Home |
OVERVIEW The "Supported Home" component allows front end users to click on pins that display information. The pins display on an image and are moveable by content authors. The information of the pins is displayed as a "card" and can feature a CTA that directs users or toggles the card to a new card for more information. Typically, the pins will display a product on the first card and an associated app on the second card. Users can toggle between both cards with buttons and text. There is a max of 6 pins available and they may be placed with an x and y coordinate that correlates to percentages of the image on each axis. IMAGES Background images are set per Interactive Card. The example below shows it built within a tab set but it can be a single card on a page if desired. The background images should be under 250kb in file size and the resolution should be 815 x 533px. The images for the cards (product/app) should also be under 250kb in file size. CSS will resize the images to be small - with a max width of 50px. The recommended image resolution is a minimum of 50px width for images - the aspect ratio won't be affected. CARD TOGGLES For content authors to toggle between each card, there is a tab on the right. This correlates to whatever pin is selected. To link from one card to another (maximum of 2) on a single pin, content authors must set a hyperlink or button link to "#toggle", "#back", or "#next". Any of these will link the user to the other card. Typically the first card will be a product and the second card will be related mobile app content. |
 |
| Product Hero Wrapper - On Demand Block Title | a. Top Left Category Icon: 260 x 340px or aspect ratio of 5:7 b. Background Image: 4320 x 1080px or aspect ratio of 4.3:1 c. Center Product Image: 890 x 911px (transparant background) or aspect ratio of 1:1 |
 |
| Wide Highlight Wrapper | a. Left Product Image: 450 x 724px or aspect ratio of 3:5 (transparant background) b. Left App Image: 474 x 144px or aspect ratio of 4:1.2 c. Right App Image: 474 x 144px or aspect ratio of 4:1.2 |
 |
| Block Highlight Title Wrapper - Blue Block Title | a. Right Product Image: 524 x 1000px or aspect ratio of 1:2 (transparant background) b. Left App Image: 474 x 144px or aspect ratio of 4:1.2 c.Right App Image: 474 x 144px or aspect ratio of 4:1.2 |
 |
| Hero Block Wrapper | Background Image: 3240 x 2400px or aspect ratio of 4:3 Section Hero Background Image: 3240 x 2400px or aspect ratio of 4:3 |
 |
| Offset Hero Wrapper | Right Image: 2769 x 1758px or aspect ratio of 5:3 |
 |
| Hero Contained | 1995 x 1515px or aspect ratio of 4:3 |
 |
| Retailers Style Box | Button Images: 1090 x 870px or aspect ratio of 5:4 |
 |
| Widescreen Image | Background Image: 2592 x 900px or aspect ratio of 5:2 |
 |
| Product Card | a. Air Icon: 800 x 800px
b. Air Image: 933 x 933px
Security Icon: 800 x 800px
Security Image: 933 x 933px
Water Icon: 800 x 800px
Water Image: 933 x 933px
*NOTE* Energy Icon: 260 x 340px
Energy Image: 933 x 933px or aspect ratio of 1:1 |
 |
| Image Right Contact Links | Image: 2073 x 1026px or aspect ratio of 2:1 |
 |
| Tall Banner Image (463px Height) | Banner Image: 2360 x 420px
(This banner has a height of 463 pixels. It will position the image to the top of the Stripe) or aspect ratio of 6:1 |
 |
| Short Banner Image (351px Height) | Banner Image: 2360 x 575px
(This banner has a height of 351 pixels. It will center the image) or aspect ratio of 6:1 |
 |
| Corporate Business Details | Left Side Logo: 250 x 130px
or aspect ratio of 2:1 Right Side Image: 2.5:1 |
 |
| Center Images | Centered Images: 290 x 260px or aspect ratio of 6:5 |
 |
| Six Up Desktop Two Up Mobile | Highlight Images: 948 x 606px or aspect ratio of 3:2 |
 |
| 3 Product Image Section | Left Side Image: 948 x 1200px
Center Image: 948 x 1200px Right Side Image: 948 x 1200px or aspect ratio of 3:4 |
 |
| Get The App Stripe | Left Button Image: 474 x 144px
Right Button Image: 474 x 144px or aspect ratio of 3:1 |
 |
| Block Well Highlights | First Highlight Image: 2560 x 2560px Second Highlight Image: 1280 x 1280px Third Highlight Image: 2560 x 2560px Fourth Highlight Image: 1280 x 1280px Fifth Highlight Image: 1280 x 1280px Sixth Highlight Image: 1280 x 1280px or aspect ratio of 1:1 |
 |
| Resources Section |
Highlight Image: 720 x 357px or aspect ratio of 3:1 |
 |
|
Section |
Text requirements |
Image example |
|
| Hero Carousel | A - Title | 1 line: max 12 characters |  |
| 2 lines: max 25 characters | |||
| B - Body |
If 1 line title: max 261 characters | ||
| If 2 lines title: max 229 characters | |||
| C - Call to Action | max -- characters | ||
| Offset Hero | A - Title | max-- characters |  |
| B - Body |
max -- characters | ||
| C - Button/CTA | max -- characters | ||
| Mobile Highlight | A - Title | max -- characters |  |
| B - Body |
max -- characters | ||
| C - Button/CTA | max -- characters | ||
| Eyelash Banner | Character count on eyelash banner | Max character count: 107 characters. |  |
|
Section |
Text requirements |
Design Example |
|
Page Title (for SEO) |
10-70 characters |  |
| Page Description (for SEO) |
50-160 characters |  |
|
OG Page Title (for Social Media sharing) |
40-60 characters |  |
This section contains templates that can be used for newly created web pages. The templates consist of Excel spreadsheets that can be downloaded, filled out and afterwards submitted with the Jira ticket service.
Basic Template Type A
A template, that can be used as a starting point for a webpage. Its purpose is to provide a pre-built page that can be customized with any of the components from the "PAGE COMPONENTS" tab.
Click here to download template
Basic Template Type B
Same as Type A, but with more CTA's. Can be customized with any of the components from the "PAGE COMPONENTS" tab.
Click here to download template
EXTENSIVE TEMPLATE
A more complex - homepage type - template, designed to provide extended information about a campaign, a group of products or services. Can be customized with any of the components from the "PAGE COMPONENTS" tab.
