This guide demonstrates how to add the Hero with Program CTA box component.

Note - This component is only available on select sites.

Step by step

To add the Hero with Program CTA Box component:

1. On the page you are creating or editing, select the Component tab. Then, tap the Components drop-down. 
   
   
    
2. Choose Add Hero with Program CTA box.
    
3. The accordion component will appear. Complete the following fields that will be displayed when the accordion is closed or expanded:
   1. Title - Enter a title, which will display in large font.
   2. Subtext - Enter a short description for the item.
   3. Hero image - Add an image, which will display to the left of the text. Select Add Media, then select an image from your desktop. Review DAS's helpful hints for writing alt text for images.
   4. Program CTA box
      1. Show CTA box - This is enabled by default. See examples below.
      2. Title - Enter a title for the content.
      3. Details - Enter a short description of the content.
      4. URL - Enter the URL of the page the user will be brought to.
      5. Link text - Enter a title that describes the link destination. For example, "IT Org Chart".
          
4. Additional actions you can take include:
   1. To move or rearrange the order of items, drag and drop a section to the position you'd like using the 6 dots, found to the left of the item.
   2. To remove a single resource, tap the three dots within the item section, then select Remove.
   3. To delete the entire component, tap Remove. Then, tap Confirm removal. 
       
5. Select Save. If you are ready to publish your page, ensure the Published toggle is enabled (green in color). 

Example

Front-end: "Show CTA box" enabled