Guidelines for AEM Components

Explore a library of components designed to create impactful marketing pages.

Hero Component

The Hero module introduces the page with a headline, some supportive copy, and an optional CTA button. Note the background can include either a gradient (recommended), an image, or a looping video.

 

 

Intro Headline

Hero Body Copy Headline

This is hero body description content.

Settings

Background

Choose a background Gradient (can be used over an image)

  • None
  • Blue
  • Blue to Cyan
  • Blue to Green
  • Cyan to Pink
  • Violet to Orange

 

or Background Image

  • 2880 pixels wide
  • 1660 x 200 JPG or PNG​
    • Gradient can be over an image

or Video

  • Upload a 12s max video size 1245x664 and .mp4 format (H.264 codec)

Text & CTA

Text

  • You have three fields you can use
  • The Intro headline is always caps
  • Headline text (always large) - ​100 characters max
  • Body Copy (always smaller text size)

 

Call To Action

  • Do you want a Button?
  • You may have up to Two Buttons
  • Color choices are: Pink, Blue, White.

Please note: Never use the same button color, always have a dominant CTA

UI & Styles

Yes or No styles

  • Top Gap or Bottom Gap?
  • Do you need the image darkened for readability?
  • Do you need the image lightened for readability?
  • Do you want the Text to be White? or Dark?
  • Do you want the intro Text to have an underline?

Examples

Intro Headline

Hero Body Copy Headline

This is hero body description content.

Intro Headline

Hero Body Copy Headline

This is hero body description content.

Intro Headline

Hero Body Copy Headline

Lorem ipsum dolores sectum sit amet​

Lorem ipsum dolor sit amet, consec tetur adipi. Lorem ipsum dolor sit amet, consec tetur adipi scing elit ulla.​

This video is for decoration only and has no audio component.

Intro Headline

Hero Video Main Headline

This is a new module that displays video behind the hero copy.
CTA

This video is for decoration only and has no audio component.

Intro Headline

Hero Video Main Headline

This is a new module that displays video behind the hero copy.

This video is for decoration only and has no audio component.

Intro Headline

Hero Video Main Headline

This is a new module that displays video behind the hero copy.