Component Library and 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

Flexible Hero Banner -Top Left
 
1034 x 600

 A: Banner Title
B: Body Copy
C: CTA Button copy & destination URL


Flexible Hero Banner - Center Left 1034x600 A: Banner Title
B: Body Copy
C: CTA Button copy & destination URL 
 
Flexible Hero Banner - Center 1034x600  A: Banner Title
B: Body Copy
C: CTA Button copy & destination URL
 
 Flexible Hero Banner - Top Right  1034x600  A: Banner Title
B: Body Copy
C: CTA Button copy & destination URL
 
Flexible Hero Banner - Center Right 1034x600 A: Banner Title
B: Body Copy
C: CTA Button copy & destination URL 
 
Hero image with 600p height (can also have video embedded) 1034 X 600 px
or
aspect ratio of 5:3  

A: Banner Title
B: Body Copy
C: CTA Button copy & destination URL


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

Product Family Section Right Image: 1500px x 1333px
(transparent background)
or aspect ratio of 5:4.4
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
(SKUs required, as image and description provided via pim sku)
 
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
Wide Image Highlight Wrapper
(Resideo Only)

Left Image: 450 x 724
or aspect ratio of 5:8
Image Highlight Tabset Image: 625w x 408h   
3 Column Section Hero Flex Image: 1290 x 903
or aspect ratio of 3:2
 
Tab Left Wrapper
1155p x 791p
or aspect ratio of 3:2
Offset Slider (image left or right)

2460 x 2016px
Or
1245 x 1020px

or aspect ratio of 5:4

Content Slider Static Video Image - 2 Panels
3238 x 1208px
or aspect ratio of 3:1
3 Product Image Section  Images: 1280x1280p   
Leave it to Pros
1333px x 1750px
or aspect ratio of 3:4
2 Column Training Highlight   Image:
1800 x 1800px
 
Supported Products
Image fed in from PIM
Video feed in (with scrolling)
Video image fed in by video thumbnail specified on YouTube
3 Column YouTube Videos  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.)  comparison table 
Horizontal Tabset with Image and Copy
4001x1542 px
or aspect ratio of 2.6:1


 Horizontal Tabset with Interactive Home - w/icons
OVERVIEW
The image provided must be a composite of the home and the icons, and icon key/legend. Icons must be placed atop the area which they reference.

URLs must be provided for each icon.

IMAGE
1349w x 545h

 
Horizontal Tabset with Interactive Home -w/cards

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. Background Image: 4320 x 1080px
or aspect ratio of 4.3:1

b. 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
(with transparant background)

Block Highlight Title Wrapper - Blue Block Title

a. Right
Image: 524 x 1000px

or aspect ratio of 1:2

(provide image with transparent background)


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

 PDP Dark Background Overview Image:
503w x 680h
 
Retailers Style Box Button Images: 109 x 87px
or aspect ratio of 5:4

Widescreen Image Background Image: 2592 x 900px
or aspect ratio of 5:2

Product Card a. Air Icon: 80 x 80px
b. Air Image: 933 x 933px

Security Icon: 80 x 80px
Security Image: 933 x 933px

Water Icon: 80 x 80px
Water Image: 933 x 933px

*NOTE* Energy Icon: 26 x 34px Energy Image: 933 x 933px




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
(Available with copy on left or right side)
 Image Logo: 250 x 130px
or aspect ratio of 2:1

Component Image: 750x320
or aspect ratio of 2.5:1

Center Images Centered Images: 290 x 260px
or aspect ratio of 6:5

 Eight Up Desktop Two Up Mobile  Highlight Images are resized by component (100p x 100p)  
Six Up Desktop Two Up Mobile
Highlight Images are resized by component (100p x 100p)

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 Highlights

Highlight Image: 720 x 357px

or aspect ratio of 3:1


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

Six Up Wrapper Highlight Icons: 300 x 300px
or
aspect ratio of 1:1

 Partner Card Image:
720x390
 
Logo Image Wrapper
Image Icons:
400 x 100px

 
 Support Category Selector Up to 6 category spaces available for use 

*Limit 47 characters per square
 
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

Design Example

Basic Centered Highlight  
FAQ Accordion  
Resources Section
(Available in 1-4 columns)
 

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
B: Body Copy
C: CTA Button copy & destination URL


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

Product Family Section
(Resideo Only)
Right Image: 1500px x 1333px
(transparent background)
or aspect ratio of 5:4.4
Featured Image (Left or Right aligned)
2037 x 1146px
or aspect ratio of 2:1

(YouTube option also available. Please provide YouTube URL and/or video thumbnail)

2 Column Image Highlight
1086 x 724px
or aspect ratio of 3:2

 
 3 Column Highlight
(This component renders the image down to 123p x 98p)
 
Instagram Row
(HWH Only)
Images: 460 x 460p
(if including text within image, this may enlarge the image)
 
Works with Alexa Icon in Banner (if possible, provide with curved edges)
474px x 144px
or aspect ratio of 4:1.2
 2 Column Feature Highlight  Images:
468 x 482p
or aspect ratio of 3:2
 
4 Panel Videos
Images pulled in via YouTube video URL  
 Blue Heading Featured Image (L/R)
 (HWH Only)
Image can be placed left or right
Image: No larger than 2037x1146 
 
Leadership Slick Slider - 4 Panels
(Resideo Only)
Highlight Images: 360 x 260px
or aspect ratio of 7:5
Control from Anywhere
(Resideo Only)
Left Image: 450 x 724
or aspect ratio of 5:8
Image Highlight Tabset
(Resideo Only)
Image: 625w x 408h 
or aspect ratio of 3:2
 
Centered Section Hero
(HWH Only)
 Component renders image to 276x221  
Tab Left Wrapper
(Resideo Only)

1155p x 791p
or aspect ratio of 3:2
Offset Slider (image left or right)

2460 x 2016px
Or
1245 x 1020px

or aspect ratio of 5:4

3 Product Image Section
(Resideo Only)
 

Images:
1280 x 1280px
or aspect ratio of 3:2

 
Content Slider Static Video Image - 2 Panels
(Resideo Only)
3238 x 1208px
or aspect ratio of 3:1
Leave it to Pros
(Resideo Only)
1333px x 1750px
or aspect ratio of 3:4
Supported Products
(Resideo Only)
Image fed in from PIM
Video feed in

Video image fed in by video thumbnail specified on YouTube
Horizontal Tabset w/copy
(Resideo Only)
Image from PIM
Comparison Table
(Resideo Only)
(SKUs required in order to show images.)  comparison table 
Horizontal Tabset with Image and Copy
(Resideo Only)
4001x1542 px
or aspect ratio of 2.6:1


 Horizontal Tabset with Interactive Home - w/icons
(Resideo Only)
OVERVIEW
The image provided must be a composite of the home and the icons, and icon key/legend. Icons must be placed atop the area which they reference.

URLs must be provided for each icon.

IMAGE
1349w x 545h

 
Horizontal Tabset with Interactive Home -w/cards
(Resideo Only)

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
(Resideo Only)
a. Background Image: 4320 x 1080px
or aspect ratio of 4.3:1

b. Center Product Image: 890 x 911px (transparant background)

or aspect ratio of 1:1

Wide Highlight Wrapper
(Resideo Only)
a. Left Product Image: 450 x 724px
or aspect ratio of 3:5
(with transparant background)

Block Highlight Title Wrapper - Blue Block Title
(Resideo Only)

a. Right
Image: 524 x 1000px

or aspect ratio of 1:2

(provide image with transparent background)


Hero Block Wrapper
(Resideo Only)
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
(Resideo Only)
Right Image: 2769 x 1758px
or aspect ratio of 5:3

Hero Contained
(Resideo Only)
1995 x 1515px
or aspect ratio of 4:3

 PDP Dark Background Overview
(Resideo Only)
Image:
503w x 680h
 
Retailers Style Box Button Images: 180p x 100p
or aspect ratio of 5:4

Widescreen Image
(Resideo Only)
Background Image: 2592 x 900px
or aspect ratio of 5:2

Product Card
(Resideo Only)
a. Air Icon: 80 x 80px
b. Air Image: 933 x 933px

Security Icon: 80 x 80px
Security Image: 933 x 933px

Water Icon: 80 x 80px
Water Image: 933 x 933px

*NOTE* Energy Icon: 26 x 34px Energy Image: 933 x 933px




Image Right Contact Links
(Resideo Only)
Image: 2073 x 1026px
or aspect ratio of 2:1 

Tall Banner Image (463px Height)
(Resideo Only)
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)
(Resideo Only)
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
(Available with copy on left or right side)
(Resideo Only)
 Image Logo: 250 x 130px
or aspect ratio of 2:1

Component Image: 750x320
or aspect ratio of 2.5:1

Center Images
(Resideo Only)
Centered Images: 290 x 260px
or aspect ratio of 6:5

Six Up Desktop Two Up Mobile
(Resideo Only)
Highlight Images: 948 x 606px
or aspect ratio of 3:2

 Eight Up Desktop Two Up Mobile  Highlight Images are resized by component (100p x 100p)  
Get The App Stripe
(Resideo Only)
Left Button Image: 474 x 144px Right Button Image: 474 x 144px

or aspect ratio of 3:1


Block Well Highlights
(Resideo Only)
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 Highlights
(Resideo Only)

Highlight Image: 720 x 357px

or aspect ratio of 3:1


Component

Recommended minimum image size

Design Example

Highlight Hero Slider
 (Resideo Only)
Icon Image: 405 x 405px
or
aspect ratio of 1:1  


 Product Card Wrapper Image Icons:
281 x 281p 
 
Highlight Card Mobile Only Slider
Highlight Icons: 260 x 340 px
or
aspect ratio of 5:7.  

Highlight Hero Mobile Only Slider
(Resideo Only)
Highlight Icons: 300 x 300px
or
aspect ratio of 1:1

Six Up Wrapper
(Resideo Only)
Highlight Icons: 300 x 300px
or
aspect ratio of 1:1

Logo Image Wrapper
(Resideo Only)
Image Icons:
400 x 100px
or aspect ratio of 5:4

 
 Support Category Selector
(Resideo Only)
Up to 6 category spaces available for use 

*Limit 47 characters per square

 
 Image Wrapper Image Icons:
180x100
or aspect ratio of 5:4
 
Large Body Font
(Resideo Only)
Highlight Icons: 300 x 300px
or
aspect ratio of 1:1


 Retailers Wrapper  Image Icons: 180x100
or aspect ratio of 5:4
 
Block Well Composite Links Highlight Icons: 100 x 100px
or
aspect ratio of 1:1


Component

Design Example

2 Column Mobile Border Bottom Chat Button
Basic Centered Highlight  
 Resources Section
(1-4 Rows Available)
 
Block Well 6 Links   
FAQ Accordion  
Inline Highlight   
 Page Title  

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
B: Body Copy
C: CTA Button copy & destination URL


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

Six Up Wrapper Highlight Icons: 300 x 300px
or
aspect ratio of 1:1

Logo Image Wrapper
Image Icons:
400 x 100px

 
 Support Category Selector Up to 6 category spaces available for use 

*Limit 47 characters per square
 
Partner Card  IMAGE:
720x390 
 
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
(Resideo Only)
Right Image: 1500px x 1333px
(transparent background)
or aspect ratio of 5:4.4
 
Featured Image (Left or Right aligned)
2037 x 1146px
or aspect ratio of 2:1

(YouTube option also available. Please provide YouTube URL and/or video thumbnail)

2 Column Training Highlight
Image:
1800 x1800px


 
 3 Column PDP-detail-Highlight
Image:
1155p x 791p
aspect ratio of 3:2
(component renders image down to 311p x 213p)

 
Instagram Row
(HWH Only)
Images: 460 x 460p
(if including text within image, this may enlarge the image)
 
Works with Alexa Icon in Banner (if possible, provide with curved edges)
474px x 144px
or aspect ratio of 4:1.2
 2 Column Feature Highlight  Images:
468 x 482p
aspect ratio of 3:2
 
3 Column Feature Highlight Image:
750 x 499px 
aspect ratio of 3:2
 
4 Panel Videos
Images pulled in via YouTube video URL   
 Blue Heading Featured Image (L/R)
 (HWH Only)
Image can be placed left or right
Image: No larger than 2037x1146 
 
Leadership Slick Slider - 4 Panels
(Resideo Only)
Highlight Images: 360 x 260px
or aspect ratio of 7:5
 
Wide Highlight Image Wrapper
(Resideo Only)
Left Image: 450 x 724
or aspect ratio of 5:8
 
Image Highlight Tabset
(Resideo Only)
Image: 625w x 408h 
or aspect ratio of 3:2
 
Centered Section Hero
(HWH Only)
 Component renders image to 276x221  
Tab Left Wrapper


1155p x 791p
or aspect ratio of 3:2
 
Offset Slider (image left or right)

2460 x 2016px
Or
1245 x 1020px

or aspect ratio of 5:4

 
3 Product Image Section
(Resideo Only)
 

Images:
1280 x 1280px
aspect ratio 3:2

 
Content Slider Static Video Image - 2 Panels
(Resideo Only)
3238 x 1208px
or aspect ratio of 3:1
 
Leave it to Pros
(Resideo Only)
1333px x 1750px
or aspect ratio of 3:4
 
Supported Products
(Resideo Only)
Image fed in from PIM  
Video feed in

Video image fed in by video thumbnail specified on YouTube
Horizontal Tabset w/copy
(Resideo Only)
Image from PIM  
Comparison Table
(Resideo Only)
(SKUs required in order to show images.)  comparison table 
Horizontal Tabset with Image and Copy
(Resideo Only)
4001x1542 px
or aspect ratio of 2.6:1


 Horizontal Tabset with Interactive Home - w/icons
(Resideo Only)
OVERVIEW
The image provided must be a composite of the home and the icons, and icon key/legend. Icons must be placed atop the area which they reference.

URLs must be provided for each icon.

IMAGE
1349w x 545h

 
Horizontal Tabset with Interactive Home -w/cards
(Resideo Only)

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
(Resideo Only)
a. Background Image: 4320 x 1080px
or aspect ratio of 4.3:1

b. Center Product Image: 890 x 911px (transparant background)

or aspect ratio of 1:1

Block Highlight Title Wrapper - Blue Block Title
(Resideo Only)

Right
Image: 524 x 1000px

or aspect ratio of 1:2

(provide image with transparent background)


Hero Block Wrapper
(Resideo Only)
Background Image: 3240 x 2400px
or aspect ratio of 4:3
Section Hero Background Image: 3240 x 2400px
or aspect ratio of 4:3

**this component increases in height as more copy is added



Offset Hero Wrapper
(Resideo Only)
Right Image: 2769 x 1758px
or aspect ratio of 5:3

Hero Contained
(Resideo Only)
1995 x 1515px
or aspect ratio of 4:3

 PDP Dark Background Overview
(Resideo Only)
Image:
503w x 680h
 
Retailers Style Box Button Images: 180p x 100p
or aspect ratio of 5:4

Widescreen Image
(Resideo Only)
Background Image: 2592 x 900px
or aspect ratio of 5:2

Product Card
(Resideo Only)
a. Air Icon: 80 x 80px
b. Air Image: 933 x 933px

Security Icon: 80 x 80px
Security Image: 933 x 933px

Water Icon: 80 x 80px
Water Image: 933 x 933px

*NOTE* Energy Icon: 26 x 34px Energy Image: 933 x 933px




Image Right Contact Links
(Resideo Only)
Image: 2073 x 1026px
or aspect ratio of 2:1 

Tall Banner Image (463px Height)
(Resideo Only)
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)
(Resideo Only)
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
(Available with copy on left or right side)
(Resideo Only)
 Image Logo: 250 x 130px
or aspect ratio of 2:1

Component Image: 750x320
or aspect ratio of 2.5:1

Center Images
(Resideo Only)
Centered Images: 290 x 260px
or aspect ratio of 6:5

Six Up Desktop Two Up Mobile
(Resideo Only)
Highlight Images: 948 x 606px
or aspect ratio of 3:2

 Eight Up Desktop Two Up Mobile  Highlight Images are resized by component (100p x 100p)  
Get The App Stripe
(Resideo Only)
Left Button Image: 474 x 144px Right Button Image: 474 x 144px

or aspect ratio of 3:1


Block Well Highlights
(Resideo Only)
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 Highlights
(Resideo Only)

Highlight Image: 720 x 357px

or aspect ratio of 3:1


Component

Design Example

Basic Centered Highlight  
FAQ Accordion  
Resources Section
(Available in 1-4 columns)
 
 2 column Basic Centered Highlight (available in 3 column)  

All images supplied to the content team should be under 250 Kb size to AVOID site speed issues

Component

Recommended minimum image size

Design Example

Hero Banner IMAGE:
1034x600 
 

Component

Recommended minimum image size

Design Example

Style Box - Flex Three Up (Available in 2, 3, and 4 column) 1440 x 1332px
aspect ratio 3:2

(component will render images down in size)
 
Basic Centered Highlight (Inside Style box with Flex Four Up)   720 x 720px
aspect ratio 3:2

(component will render image down in size)
 
Featured Image (Left or Right aligned)
2037 x 1146px
or aspect ratio of 2:1
Offset Slider
(available with image or video)

2460 x 2016px
Or
1245 x 1020px

or aspect ratio of 5:4



 
Stripe with "Fill Short" Selection Background Image: 2400 x 500px
 
Highlights within 3 column equal inner structure
(available with 2, 3, and 4 column)
IMAGE:
720 x 720px 
or aspect ratio 3:2
 
Video Slider - 2 column with image and highlight 3238 x 1208px
or aspect ratio of 3:1
 
 Feature Image (Left or Right) w/centered text 1440x1332   
Highlights in 4 column equal (available in 2 and 3 column) IMAGE:
720x720 px 
aspect ratio 3:2
 
Centered Highlight in style box with Flex Four Up (available in 2 and 3 column) IMAGE:
720x720 px 
 
 Horizontal Tab Set Image: 229 x 150px   
 Interactive House Component Overview
The image provided must be a composite of the home, icons, and key/legend. Icons must be placed atop the area which they reference.

URLs must be provided for each icon.

IMAGE:
1349w x 545h 
 



 Video Panel Image
1034x600 
Jebbit Integration  (Requires Sitecore Support)   

Component

Recommended minimum image size

Design Example

 Highlight card mobile only slider Icons: 150 x 150px
aspect ratio 1:1
 
Image Slick Slider   Image: 428 x 428px

 
 Image Slick Slider (with body copy)  Image: 428x428 px  
Layout: Style Box - Retailers Image Icons: 428 x 428px  
 Checklist with Image and Icons Left Image: 510 x 660px

Checkmark Icons: 80 x 80px
 
 Layout: 4 Column Equal IMAGE:
80x80px

(note: The icons for this component are housed within a content spot and can be resized if needed) 
 

Component

Design Example

Basic Centered Highlight  
Resources Section
(Available in 1-4 columns)
 
Accordion Panel  

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. eye lash banner

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
Image Alt Text.
(description of what an image/graphic shows)
Max 125 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.

Click here to download template

All images supplied to the content team should be under 250 Kb size to AVOID site speed issues