Static Hero component

The Hero component has an image for the background with a title, text, and a single Call to Action (CTA) button.

There are 2 layout options:

  • Button horizontal position: 
    • Right, where text is on the left and the button is on the right
    • Center, where text is above the button and both are centered
  • Content alignment, where text and button are vertically:
    • center
    • top
    • bottom

To load the component

To load Hero component onto the page:

  1. Open Side Panel if closed, and then click on Components tab
  2. Drag and drop the Hero component.

To configure Hero component

  1. Click on the component
  2. Click on Configure icon (wrench) to open the Hero Configure panel.
  3. Drag and drop image onto the Image field (Fig. 1)
  4. Populate the necessary fields

    Note: For the URL field, please make sure you use the Path Picker to select the internal page you want to link to. The Path Picker will allow the system to save the link reference information at the back end and can automatically update the page URL when the linked page is moved to other location.

  5. Click Done icon (check mark) to save

Troubleshooting

Why can't I remove the Hero component on the Article template?
The Hero component on the Article template is part of the design element and is not removable. 

Where can I find out about recommended image size?
To find out more about the best image size for the Hero component, please consult the Recommended Image Size page.

Why the image looks so dark?
The background image is darkened due to the accessibility compliance. The tint only appears after Title field and/or Text field are filled.