Hero Images

Overview and specs

Hero images

Specs: Desktop: 1048 x 542px; Tablet: 824 x 651px; Mobile: 600 x 592px.

All image file sizes should be 100 KB or less, unless reducing the size greatly compromises the quality of the image. Image size specs are the same for every template. A hero image should be output in three formats, for desktop, tablet, and mobile per the above specs, using JPEG or PNG formats. This will allow the image to scale properly across all devices.

Hero content can be displayed two ways in desktop and tablet: left-aligned image or right-aligned image. Left aligned images are preferred to compliment the brand. This can include a headline, sub-headline, and a link. There are areas on the hero image that may become cropped on smaller screens; refer to the end of this section for an overview on “Hero Crop Areas."

Hero text

Alignment will always be left aligned and will appear over a gray panel. Hero text color should avoid any other font styles and should follow the standard styling. The text and the link will be applied once the image is uploaded to the website, so no need to include this information directly on the image file. Only the image is needed.

Hero character count and style formats

Headline:

• Recommended: 20 - 50 characters
• Max: 85 characters (if no hero sub-headline exists)
• Title case: All the major words are capitalized — everything except articles, conjunctions and prepositions. Question marks and exclamation points are used where appropriate.

Sub-headline:

• Recommended: 40 - 100 characters
• Sentence case: The first word of a sentence is capitalized, along with all proper nouns. Periods or other end punctuation used.

Link text:

• Max: 40 characters
• Title case: All the major words are capitalized — everything except articles, conjunctions and prepositions. Question marks and exclamation points are used where appropriate.

[Back to Top]

Brand guidelines

Hero features on henryford.com should fit within the Henry Ford Health brand guidelines, which includes appropriate photography to deliver patient-focused messages. In general, avoid clinical imagery such as medical devices, technology or a group of physicians. Try to avoid stock when possible, but if this is the only option, make sure to use imagery that feels a bit more realistic. These guidelines are designed to accommodate both patient stories and other types of features.

Refer to the section below for examples of images that fit within the brand. People and patients are shown in their natural environment, enjoying their daily activities and lifestyle. Always consider diversity of age, gender and ethnic backgrounds.