AEM component name: O4 Detail Hero Banner

Pattern overview: The Detail Hero Banner appears at the top of the page (between the navigation and start of content). It serves as the starting point for the page and should orient the user to the content on the rest of the page. The image occupies the right half of the banner area, and the copy appears on the left side. On mobile, the copy appears below the banner.

Usage: Use on L1–L6 pages to reinforce the H1 heading and supporting copy.

Options:

• • Background color options —
    • White (default) used on L4–L6 pages
    • Sky Blue used behind the integrated search bar and drop-down list
    • Warm White used as needed

  • Play a video overtop the banner inside a modal window. The CTA button label typically should read “Watch video” in sentence case, no punctuation.

  • Optional Social media share icons can be added in place of a CTA button.*

  • Include a drop-down listing in place of the CTA button.

  • Include a global search bar in place of the CTA button.

  • CTA buttons — Primary (large or medium), secondary (large or medium), video, or place two buttons side by side. **

*Optional

**When placing two buttons side by side, the primary button should appear on the left and buttons should always be the same size.

Guidelines:

• Follow the digital photography guidelines when selecting imagery.

• Only add the social media icons when relevant to the subject.

• Avoid adding both social media buttons and CTA buttons in the same banner. The best practice is to add the contact us button using the CTA bar or in the secondary navigation.

Image guidelines:

• Follow the digital photography guidelines when selecting imagery.

Image:

• • Image — 720 x 460 px, JPEG medium or high
  • Include alt text if the image is informative (non-decorative). In most cases, alt text will not be required since a banner image tends to be decorative. Learn more about alt text requirements.

Video:

The video must be carefully prepared following the standards outlined for videos. The button label should read “Watch video.”

Content:

• • Eyebrow* — Up to 45 characters (including spaces)**
  • H1 heading — Up to 45 characters (including spaces)**
  • Body copy — Up to 140 characters (including spaces)**
  • Button* label — Three words or 25 characters max (including spaces)
  • Drop-down menu option
    • Drop-down label (above box) — Up to 25 characters max (including spaces)
    • Drop-down placeholder text (inside of box) — Up to 25 characters max (including spaces)
  • Search bar option
    • Search bar headline (above search bar) — Up to 35 characters max (including spaces)
    • Search bar placeholder text (inside of search bar) — Up to 25 characters max (including spaces)
    • Secondary action (button link below box) — Three words or 25 characters max (including spaces)

*Optional

**It is recommended that the character counts be followed; however, in cases of lengthy product names or where additional characters are important for search engine optimization (SEO) or clarity, the character count can increase up to 55 characters.