On this page:

Basic Info | Example | Tutorial | Accessibility Info | Screenshots

Basic Info

The Feature Promo is a customizable text and image-based teaser that allows site visitors to see promotional content for a particular content on another page. This promo is more visual than both the Basic and Button Promos and is intended to be used in larger spaces.

Example

Feature Promo with Optional Text

Add up to 140 characters of optional text to customize your Feature Promo. Don't forget to crop your image and add alt text.

Adding a Link is Required

Tutorial

Adding/Editing a Feature Promo

  1. Navigate to and open your page.
  2. Add the Feature Promo component.
    1. Tip: The Feature Promo works best in wider column width spaces; we suggest placing it in your main content area or 50-50 Column Control containers or larger. It also works best when you use only one Feature Promo on your page.
  3. A new Feature Promo component placeholder will display on the page.
  4. To edit the component, click or touch the placeholder. The component toolbar will display along the top of the space.
  5. Select the wrench icon to configure.
  6. An edit window will appear so you can customize the promo's overall appearance by adding optional text and insert the required title, link, and image with associated alt text.
    1. Required fields:
      1. Title
      2. Button Title
      3. Link to
      4. Image asset
      5. Alternative text
    2. Optional fields:
      1. Text
      2. Open link in new window
  7. Add a required Title in the appropriate field. There is a character limit of 100.
  8. In the Text field provide any additional optional text you would like to include. This field is optional and has a character limit of 140.
  9. In the Button Title field provide direct and actionable text that will be displayed within the button. This field is required and has a character limit of 300. Note: The Button Title is also the linked text that will be read by screen reading software. We recommend having only one Feature Promo per page, but in situations where there are multiple this text should be unique.
  10. In the Link to field you can browse to select a CMS page or file in the DAM, insert an external URL, add "mailto:" before an email address, or add an anchor link.
  11. Make sure to have the Side Panel open before editing the component. Drag an image asset into the Image asset field from the Side Panel to insert the required image to be used with your Feature Promo. Note: The CMS will allow you to add a new Feature Promo without an image, but it will not display properly.
    1. Locate an image from the DAM asset tray on the left side of your screen. Drag and drop it into the specified spot within the edit window.
    2. A crop is recommended for all images used in this promo.
      1. If uploading custom graphics for your Feature Promo, we recommend creating your images at the maximum display size of 930 pixels x 698 pixels.
  12. Select the Accessibility tab to insert the required Alternative Text.
  13. Click or touch the checkmark icon to save and close.

Specifying a Promo Image Crop

  1. Select your configured promo to open the component toolbar and select the pencil icon to edit your promo image.
  2. Enter fullscreen editing mode by choosing the icon to the left of the X or cancel icon to find the image crop feature.
  3. Choose the crop icon in the very top left corner and select "4:3."
  4. Resize and move the window to highlight exactly what you want to appear then confirm the crop by selecting the checkmark icon in the top right corner.
  5. Once confirmed, you should see your newly cropped image.  You can now exit fullscreen.
  6. To finish saving the crop, click the checkmark icon in the toolbar.

^ Back to top

Accessibility Info

Images

  • Avoid images with text when selecting your promo image. Use stock photography or iconography instead.
  • Images for the Feature Promo should be considered decorative, so make sure it's something that can complement your text content rather than replace it.

Linked Text

  • When providing online content in the Feature Promo, remember to provide descriptive link text in the Button Title field.

^ Back to top

Screenshots

Component Tutorial: Feature Promo edit window details tab

Component Tutorial: Feature Promo edit window image tab