Hero

User Story

As a content author, I want to add a hero component, so that I can articulate to the customer the main message of my product.

 

 

Overview

The hero component is a composite/molecule component used to highlight a product's feature.  It consists of the following embedded atom components:

  1.  A title atom component to be used for the 'eyebrow' text.
  2.  A second title atom component for other title uses.
  3.  A text atom component for the body text.
  4.  A CTA atom component to handle the call to action.
  5.  An OOTB image component 
    1. NOTE:  This may be changed to a customized image component but that is currently on hold as of this writing.
  6.  A OOTB parsys component for adding any additional components that may be required.

 

Dialog:

There is NO dialog for this component.  The embedded atom components have their own dialogs for entering text and formatting as required.  See the tech design pages of the atom components for further details.

 

Example:

Eyebrow Title Text CTA Image Content Fragment Style Screenshot
Yes Yes   Yes Yes   Background Image

 

Mobile-Specific interaction

  1. When using a two column tile style for the hero, the image will be stacked on top in mobile.

Functional Requirements (end-user requirements)

  1. Click/tap on CTA to be taken to target page
  2. Click/tap on superscript to be shown target modal

Cash Back Cash Back