Image Panel Specifications

Image Panels are responsive, with flexible widths and independent layers of content. The image panel elements scale and shift to provide the best display across the spectrum of devices used to access OhioLottery.com. These image panels are comprised of background images overlayed with HTML text. Image panels may include call to action buttons within the overlay area for user interactivity.

Click the numbered tab on the left to see a particular asset’s specifications

Full Width Image Panel Example

1

Full Width Image Panel Background Image

Full Width Image Panel Text Area

Half Width Image Panel Example

Home Page Example
5

Half Width Image Panel Background Image

Half Width Image Panel Text Area

9

Mobile Image Panel Example

1

Full Width Image Panel Background Image

Width

1200px

Height

400px

File Types

.jpg, .png (8 Bit)

Usage

The focus of this image should be within the top 30% or ~200px because the rest of the image will be behind an overlay.

2

Full Width Text Area Title

Roboto – Slab
Font-Size: 36px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255
Line Height: 38px

Usage

Used to grab the user and engage them. Must be short, snappy, marketing speak.

Suggested Word Count

Under 10

Suggested Character Count

Under 40

3

Full Width Text Area Text Area

Roboto
Font-Size: 21px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255

Usage

Used to grab the user and engage them. Must be short, snappy, marketing speak.

Suggested Word Count

10-20 Words

Suggested Character Count

Under 250

4

Full Width Text Area CTA Button

Roboto
Font-Size: 16px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255

Usage

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

Suggested Character Count

Under 50

5

Half Width Image Panel Background Image

Width

600px

Height

400px

File Types

.jpg, .png (8 Bit)

Usage

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.

6

Half Width Text Area Title

Roboto Slab
Font-Size: 36px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255

Usage

Used to grab the user and engage them. Must be short, snappy, marketing speak.

Suggested Word Count

1-4 Words

Suggested Character Count

Under 30

7

Half Width Text Area Text Area

Roboto
Font-Size: 18px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255
Line Height: 28px

Usage

Used to grab the user and engage them. Must be short, snappy, marketing speak.

Suggested Word Count

10-20 Words

Suggested Character Count

Under 125

8

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

Usage

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

Suggested Character Count

Under 30 per button

9

Mobile Image Panel Overlay Example

Usage

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.