Shoutout component

Visually showcase important text and links.

This guide demonstrates how to create a shoutout feature using the Shoutout component.

Step by step

To add the Shoutout component:

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


     
  2. Choose Add Shoutout.
     
  3. The component will appear. Complete the following fields:
    1. Shoutout Title - Enter a title for the section. This will appear as the largest text.
    2. Shoutout Blurb - Use the WYSIWYG editor to construct the body of the text.
    3. URL - Enter the URL of the page the user will be brought to.
    4. Link text - Enter a title that describes the link destination. This is the text displayed in the clickable button.
    5. Shoutout style - Choose from three options of how the shoutout will appear. Examples of each can be found below.
      1. Option 1: White text on red background
      2. Option 2: Black text on white background
      3. Option 3: White text on photo background with overlay
        1. If you choose option 3, you must upload an image which will display as the background image. Select Choose File, then select an image. Review DAS's helpful hints for writing alt text for images.
        2. Note - Although the image will be overlayed to better display the text, be mindful of choosing an image that ensures sufficient color contrast.
           
  4. 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). 

Examples

Front-end