Additional Resources component

Display quick links with a background image.

This guide demonstrates how to add the Additional Resources component to help visitors to quickly find important information in a visually appealing way.

Step by step

To add the Additional Resources component:

  1. On the page you are creating or editing, select the Component tab. Then, tap the Components drop-down


     
  2. Choose Add Additional Resources.
     
  3. The component will appear. Complete the following fields:
    1. Title - Enter the title of the overall section. For example, "Additional Resources".
    2. Body - Enter a short description of the resource.
    3. More link
      1. URL - Enter the URL of the page the user will be brought to.
      2. Link text - Enter a title that describes the link destination. For example, "IT Org Chart".
    4. Background Image - If desired, upload a background image for the section. Note that your image must be watermarked before uploading to accurately display the text. If you do nothing, the HMS Logo will appear by default as your background image.
    5. Additional Resources Items
      1. URL - Enter the URL of the page the user will be brought to.
      2. Link text - Enter a title that describes the link destination. For example, "IT Org Chart".
      3. Subtitle - If desired, enter a short description of the link destination. For example, "Learn more about the IT infrastructure."
         
  4. To add another column with a new section heading, select Add Additional Resources Item. The recommended number of resources are 2-3.
     
  5. 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
       
  6. Select Save. If you are ready to publish your page, ensure the Published toggle is enabled (green in color). 

Example

Front-end

This is an example of the "Body" section.

This is the "Subtitle" text.
This is another example of the "Subtitle" text.