Hero Snippet

Example of a Hero Snippet
Example of a Hero Snippet with a Tag Line Summary

The Hero Snippet is an element used for displaying large, prominent images accompanied by text at the top of websites. Like the slideshow, it is typically the first visual element that a visitor will encounter, so it must be relevant and it must give the end-user an idea of what the site is about. The Hero Snippet is most noticeably found on the Alumni and Support uOttawa pages, as it was originally created for the purpose of the University of Ottawa's Defy the Conventional campaign.

Usage guidelines

  • The image and text must be relevant and must quickly convey the purpose of the site or landing page to the visitor.
  • The image filesize should be as low as possible to not slow down page load, especially on mobile devices.
  • No more than one hero snippet per landing page should be used. Users should not be visually distracted from the content of the page.
  • The webmaster is responsible for ensuring that the contrast between the text and the underlying image are sufficient in order to meet accessibility requirements.


For the purpose of this tutorial:

  • You must have webmaster access to your site.
  • You must be familiar with snippets.
  • You must be familiar with editing Panel pages.

Step 1: Create the Hero Snippet

  1. In the administrative menu, click on Content.
  2. At the top-right of the page, click on the tab Snippets.
  3. At the top of this page, click on the link Add Content Snippet and then select Hero Snippet.
  4. On the page that appears, fill out the sections as follows:
    • Tag Line Summary (mandatory): Enter a short text that serves to highlight a moment, an event, a slogan or the purpose of the page.
    • Tag Line: Enter a concise title that will be displayed overtop the Summary.
    • Label (mandatory): Enter a label that will be used to identify this snippet from the administrative backend.
    • Banner image: Select the image that you wish to use in the background. You should make sure that the image you are uploading is (1) relatively small in filesize, and (2) is larger in width than it is tall.
  5. Once ready, enter a comment in the Revision log message field at the bottom of the page, and click on the button Save.

Step 2: Add the Hero Snippet to a Panel page

  1. In the administrative menu, click on Structure.
  2. From the list of links, navigate to Pages.
  3. Find the page on which you wish to add the Hero Snippet and click on Edit.
  4. From the left menu, click on Content. You should now see a wireframe outline of all your content.
  5. Click on the gear icon located at the top-left corner of one of the regions. From the dropdown menu, select Add content.
  6. A window will pop up. In the left menu, click on Content and then select Content Snippet.
    1. Find the label you gave your Hero Snippet in step 1.4 and select it.
    2. For the view mode, select Title Overlay.
  7. Once done, click on the button Finish.
  8. Move your newly added Hero Snippet into the desired position.
  9. Once done, click on the button Update and save to save all your changes.

Step 3: Style the Hero Snippet

  1. On the same page, click on the top-right gear icon associated with the Hero Snippet you just added. From the dropdown menu, under Style, select Change.
  2. Select Component Styles and click on the button Next.
  3. Set the Overlay Position to either Default or Impactful, according to your needs.
  4. Once done, click on the button Save.
  5. Then click on the button Update and save to save all your changes.
» Submit feedback
  • Tutorials
Back to top