...
Image Details
Image Size for Desktop
1110 px 1110px / 300 px300px
The height of the image can vary based on requirements of the page. However, we would like to keep it consistent.
Image Size for Mobile
390 px 390px / 250 px250px
Background Color
The background color behind the text should be accessible with one of these colors below:
...
Layouts
Desktop Layout 1 - Left
...
aligned header and
...
description
Right align the graphical elements
Single-colored or simple gradient background on the left of the image. This will ensure the text placed on the banner is readable and accessible.
Limit graphics to approximately 470px from the right edge
...
Desktop Layout 2 - Center
...
aligned header and description
Place graphical elements on the left and right edges to ensure a single-colored background in the center. This will ensure the text placed on the banner is readable and accessible.
Limit graphics to approximately 250px from the left and right edge
...
Mobile Layout - Header and description below the image
Place graphical elements on the left and right edges to ensure a single-colored background in the center. This will ensure the text placed on the banner is readable and accessible.
...
Limit graphics to approximately 250px from the left and right edge
...
Suggested Naming Convention
Desktop
202424-06-_CDAF-banner-desktop-1110x3002024
24-06-homepage_hp-banner-desktop-1110x300
Mobile
202424-06-_CDAF-banner-mobile-390x2502024
24-06-_homepage-banner-mobile-390x250
Best Practices
File Size
...