Image Panel Specifications
Full Width Image Panel Example
Full Width Image Panel Background Image
Specifications
- 1200px
- 400px
- .jpg, .png (8 Bit)
The focus of this image should be within the top 30% or ~200px because the rest of the image will be behind an overlay.
Full Width Image Panel Text Area
Specifications - Full Width Text Area Title
- Roboto – Slab
- Font-Size: 36px
- Hex Color: #FFFFFF
- RGB Color: R:255 G:255 B:255
- Line Height: 38px
Used to grab the user and engage them. Must be short, snappy, marketing speak.
Suggested Word Count- Under 10
- Under 40
Specifications - Full Width Text Area Text Area
- Roboto
- Font-Size: 21px
- Hex Color: #FFFFFF
- RGB Color: R:255 G:255 B:255
Used to grab the user and engage them. Must be short, snappy, marketing speak.
Suggested Word Count- 10-20 Words
- Under 250
Specifications - Full Width Text Area CTA Button
- Roboto
- Font-Size: 16px
- Hex Color: #FFFFFF
- RGB Color: R:255 G:255 B:255
Should be text that entices a click or action. The CTA button is optional and isn't necessary to include in the panel. It can be used to direct the user to additional information about the content or to act on the information presented with the panel. The URL and link can be customized. An additional second button is also available with the same specifications. See the Half Width example below.
Suggested Word Count- 1-4 Words
- Under 50
Half Width Image Panel Example
Half Width Image Panel Background Image
Specifications
- 600px
- 400px
- .jpg, .png (8 Bit)
The main focus of this image should be kept to the top 30% or ~200px because the rest of the image will be behind the overlay.
Half Width Image Panel Text Area
Specifications - Half Width Text Area Title
- Roboto Slab
- Font-Size: 36px
- Hex Color: #FFFFFF
- RGB Color: R:255 G:255 B:255
Used to grab the user and engage them. Must be short, snappy, marketing speak.
Suggested Word Count- 1-4 Words
- Under 30
Specifications - Half Width Text Area Text Area
- Roboto
- Font-Size: 18px
- Hex Color: #FFFFFF
- RGB Color: R:255 G:255 B:255
- Line Height: 28px
Used to grab the user and engage them. Must be short, snappy, marketing speak.
Suggested Word Count- 10-20 Words
- Under 125
Specifications - Half Width Text Area CTA Button(s)
- Roboto
- Font-Size: 14px
- Hex Color: #FFFFFF
- RGB Color: R:255 G:255 B:255
- Line Height: 36px
Should be text that entices a click or action. The CTA button is optional and isn't necessary to include in the panel. It can be used to direct the user to additional information about the content or to act on the information presented with the panel. The URL and link can be customized.
Suggested Word Count- 1-4 Words per button
- Under 30 per button
Mobile Image Panel Overlay Example
Specifications
When viewed on a mobile device the overlay becomes opaque. The top 160px of the background image will remain visible while the bottom portion is obscured by the overlay and text.