Image Guides and Templates
The image guidelines and templates section focuses on best practices for formatting images to fit within our design system components. Images should preferably be in WEBP format, with JPG or PNG as alternatives when necessary. To optimize performance and SEO, file sizes should be kept under 300KB whenever possible, though in certain cases, higher file sizes may be permissible.
To ensure images display correctly within components, it's important to follow these guidelines. Templates are designed to help with the correct placement of focal points within the image, ensuring they work seamlessly within components, even when dynamically cropped or resized.
Below, you’ll find guidelines along with downloadable templates to help you properly format images and maintain consistency and optimal performance across the site.
Image guidelines and templates index:
- B1 Hero Banner / B2 Hero Carousel
- B3 Hero Featured Banner
- C6 Promo Carousel CTA / C7 Promo CTA
- C11 Reverse Row Story with Visual
- C13 Side Photo Content Card / C14 Side Photo Content Card with Carousel
- C15 Image asset
- C17 Side media asset
- C20 CTA content card
- C23 Content feed for local site
- C24 Location card
- C43 Media gallery
- C55 Biography directory
- C56 Biography grid
- C60 News / C61 Blog
B1 Hero Banner / B2 Hero Carousel
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: 1920 x 500.
- (Optional) Mobile fallback image: 600 x 370
- File size: 300KB or under.
- Additional notes:
- A gradient background overlay can be dynamically applied through the component. The gradient levels (0, 20, 40, 60, 80) appear from the left and gradually move to the right. This effect is only applicable on desktop and does not appear on mobile.
- While on desktop content is positioned on top of the image, on mobile, it will drop below the image container.
B3 Hero Featured Banner
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 1920 x 500.
- (Optional) Mobile fallback image: 600 x 500
- File size: 500KB or under.
- Additional notes:
- A gradient background overlay can be dynamically applied through the component. The gradient levels (0, 20, 40, 60, 80) appear from the bottom and gradually move upward.
- Due to unique styling, B3 component is only to be used on the corporate site (using corporate theme)
C6 Promo Carousel CTA / C7 Promo CTA
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 1920 x 500.
- File size: 250KB or under.
- Additional notes: The image is dynamically resized by the component for optimal display.
C11 Reverse Row Story with Visual
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 1920 x 500.
- File size: 300KB or under.
- Additional notes: The image is dynamically resized by the component for optimal display.
C13 Side Photo Content Card / C14 Side Photo Content Card with Carousel
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 800 x 533.
- File size: 300KB or under.
- Additional notes: The image is dynamically resized by the component for optimal display.
C15 Image asset
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended max width 1440px. Height flexible (should not exceed 700px)
- File size: 200KB or under.
- Additional notes:
- The Image Asset component retains the image's original dimensions.
- If the image is larger than the grid container (1440px max), it scales down to fit.
C17 Side media asset
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended max width: 700px. Height flexible (should not exceed 500px).
- File size: 100KB or under.
- Additional notes: Once the mobile breakpoint is reached, the image will be dynamically resized to fill the container.
C20 CTA content card
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 500 x 250.
- File size: 200KB or under.
- Additional notes:
- The image will always display from the top, so sides or bottom may be cropped depending on the device or screen resolution.
- Ensure the focal point is centered to maintain visual integrity when cropped.
C23 Content feed for local site
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 800 x 800.
- File size: 200KB or under.
- Additional notes:
- The image will always display from the top. Bottom portion of the image may be cropped off.
- Ensure the focal point is centered to maintain visual integrity when cropped.
C24 Location card
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 500 x 250.
- File size: 200KB or under.
- Additional notes:
- The image will always display from the top, so sides or bottom may be cropped depending on the device or screen resolution.
- Ensure the focal point is centered to maintain visual integrity when cropped.
C43 Media gallery
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 825 x 500.
- File size: 250KB or under.
- Additional notes:
- The image will always display from the top, so sides or bottom may be cropped depending on the device or screen resolution.
C55 Biography directory
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 360 x 440.
- File size: 300KB or under.
- Additional notes: None
C56 Biography grid
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 360 x 440.
- File size: 300KB or under.
- Additional notes: None
C60 News / C61 Blog
- Preferred format: WEBP (JPG or PNG as alternatives)
- Image dimensions: Recommended size of 1440 x 750.
- File size: 300KB or under.
- Additional notes:
- The image will always display from the top, so sides or bottom may be cropped depending on the device or screen resolution.
- Ensure the focal point is centered to maintain visual integrity when cropped.