American Express American Express |

Hero Images

Purpose

Hero components should take a prominent position within a page. Usually anchored at the top, they are often the first visual a customer encounters. They draw a customer into the page, and provide an overview of the most important information, as well as provide context and reinforce the American Express brand.

Text and Imagery Guidelines

Best Practices for Hero Text

Text for your hero is flexible and dependent upon various elements within your design. It is important to keep your text concise.

Best Practices for Hero Background Images

As well as abiding by the general usages of a hero component, imagery used within a hero should meet the following criteria:

  • Images must be full bleed from edge to edge.
  • The image or pattern should not detract from the readability of the text/content that is overlaid on it.
  • When using an image, select one in which the focal point is opposite the text/content on top of it. For example, if the text is aligned left, the image focal point should fall to the right of the text.
  • The relationship device doesn’t need to be legible on the image, as it is a graphical element. However, you can use a variety of color options available on the brand site.

Marketing Heroes

Usage

The marketing hero anchors content or creates a large space for important messaging.

Example - Hero

Copy
<!-- Desktop View -->
<div class="hero dls-white flex flex-align-center hidden-sm-down">
  <div class="hero-bg" style="background-image:url('../../assets/img/visuals/components/hero/bg-images/marketing-hero-desktop.png');">
  </div>
  <div class="hero-text-overlay flex flex-column flex-align-items-center stack pad-2 margin-1-tb col-lg-4 col-md-5">
    <h1 class="heading-6 dls-deep-blue">Which Card is Right for You?</h1>
    <p class="body-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
    <div class="margin-3-t">
        <a class="btn btn-bright-blue" href="#example">View All Cards</a>
    </div>
  </div>
</div>
</div>

<!-- Mobile View -->
<div class="hero dls-white flex flex-align-center hidden-md-up">
  <div class="hero-bg" style="background-image:url('../../assets/img/visuals/components/hero/bg-images/marketing-hero-mobile.png');">
  </div>
  <div class="hero-text-overlay pad-2 margin-1-tb margin-2-lr row fluid">
    <div class="stack flex flex-column flex-justify-center">
        <h1 class="heading-6 dls-deep-blue">Which Card is Right for You? </h1>
        <p class="body-3 dls-gray-06">Find the American Express Card that best fits your lifestyle - with Cardmember-only perks and benefits, we'll help you live life to the fullest.</p>
        <div class="margin-2-t">
            <a class="btn btn-bright-blue" href="#example">View All Cards</a>
        </div>
    </div>
</div>
</div>

When building a carousel with hero images, make sure the images are all the same height. For specs on how to design this component, view the Carousel section in the DLS.

Pattern Hero

Usage

Leverage a branded background element for instances where a non-image representation is needed. Use a white box to ensure legibility when using branded patterns.

Example - Pattern

Copy
<div class="hero flex flex-align-center">
    <div class="hero-bg bg-repeat" style="background-image:url(https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/brand/worldservice-tile-deepblue.svg); background-size:400px;">
    </div>
    <div class="pad pad-4-md-up flex flex-justify-center fluid">
      <div class="row fluid">
          <div class="col-md-8">
            <div class="hero-text-overlay stack pad pad-responsive-extra-lr">
              <h1 class="dls-deep-blue">
                <span class="heading-6 hidden-sm-down">Refer Friends. Get Rewarded with American Express.</span>
                <span class="heading-5 hidden-md-up">Refer Friends. Get Rewarded with American Express.</span>
              </h1>
              <p class="body-3">The power of American Express is yours to share. Refer your friends, and earn rewards for approved referrals.</p>
              <div class="margin-3-t text-align-center-sm-down">
                  <a class="btn" href="#example">View All Cards</a>
              </div>
            </div>
          </div>
      </div>
    </div>
</div>