Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    User Guide

    Hero Component

    The Hero component is a page section that holds a central position on a page, found at the top of the screen under the Header. It serves to introduce the purpose of the page by providing helpful content such as a title, additional copy, an image, and a CTA. The Hero is a required component, baked into all page templates.

     

    There are two Hero variations: the Basic Hero, and the Homepage Hero. Both are similar in purpose and use, though the Homepage Hero uses a different image type.

    Overview

    Component name: Hero (Homepage Hero; Basic Hero)

    Authors who can use: depends on variation

    • Basic Hero: any author
    • Homepage Hero: Admin only

    Templates/page types that can use component: all

    Required or optional: required 

    Authoring Fields

    Adding the Hero component to the page

    1. The Hero component is baked into page templates. Authors cannot add the Hero.

    Editing the Basic Hero component

    1. With the edit wrench, open the component.

    2. Pre-title field: Add a pre-title to display above the main title.

    3. Title field: Add a title to display as the headline.

    4. Description field: Add a description to appear below the main title. The description text may be formatted with bold, italics, bullets, links, etc.

    5. Enable Search checkbox: When checked, a Quick Search bar will display in the Hero. When unchecked, the option to instead add CTAs is enabled. Default unchecked.

    6. Enable Image checkbox: When checked, an Image component will display in the Hero. Default unchecked.

    a. To edit the Image component:

    i. Exit the Hero authoring dialog.

    ii.  Hover over the Image component (now displayed within the Hero) until it has a blue outline. Click on the edit wrench.

    iii. Edit the Image component as normal. For editing details, reference the Image component user guide.

    iv. Disable lazy loading checkbox: must be checked off for Hero. All images authored via the out-of-the-box Image component are lazy loaded by default. This means that the image will be loaded at a later point in the page load process. Since the Hero is at the top, we want this disabled, so the image is always visible.

    7. Image Alignment dropdown: Left, Right, Top. Default Left.

    8. Call-to-actions multifield (only enabled if Search is unchecked)

    a. Call to action Link path field: Add a link for the CTA button.

    b. Call to action Link label field: Add a label for the CTA button.

    9. Exit the authoring dialog. With the paintbrush, open the Styles dropdown.

    Hero component Styles toolbar with text alignment options

    a. Select alignment options for text, and/or for Image (if Image is enabled). The default is text aligned left; Image aligned left.

    b. Preview the options using the Emulator widget to test on desktop, mobile, and tablet breakpoints.

    10. To edit the Hero background color, use the side toggle to open the Content Tree on the lefthand side. Click the edit wrench next to the Container that holds the Hero. This opens the Container's authoring dialog, which includes the Container Background Color option. Reference the Container user guide for more info.

    Content Tree from the lefthand side side toggle, listing all components and Containers on the page.

    Basic Hero examples

    Basic Hero with two CTAs and no Image. Text is center aligned. Figure A: Basic Hero with two CTAs and no Image. Text is center aligned.
    Basic Hero with no CTAs and an Image (including border radius) right aligned. Text is left aligned. Background color is set to Surface. Figure C: Basic Hero with no CTAs and an Image (including border radius) right aligned. Text is left aligned. Background color is set to Surface.
    Basic Hero with no CTAs and Quick Search. Text is left aligned. Background color is set to Surface. Figure B: Basic Hero with no CTAs and Quick Search. Text is left aligned. Background color is set to Surface.
    Basic Hero with one CTA and an Image (including border radius) left aligned. Text is left aligned. Background color is set to Surface. Figure D: Basic Hero with one CTA and an Image (including border radius) right aligned. Text is left aligned. Background color is set to Surface.

    Editing the Homepage Hero component

    1. Follow the same guidelines as above for the Basic Hero. There are only two differences:

    a. Homepage Hero only appears on the Homepage Template.

    b. Homepage Hero’s Image, if enabled, is full bleed across the page – it extends to the edge of the screen, leaving no white space.

    Accessibility

    1. If Search checkbox is checked, an accessibility label must be added to the Quick Search component in the Hero. Click on Quick Search --> edit wrench --> Accessibility tab, then fill the Label field.

    Other tips

    1. Hero images look best at the following ratio/size: 4:3, 1200x900 px
    2. Use the Emulator widget to test Hero size on different devices.
      1. If using an image: On desktop, the image can appear on the left, right, or top. On mobile/tablet, the image is always on top.
    3. A maximum of two CTAs can be added. Only the first should have Primary checkbox checked.
    4. If an Image is enabled, text should always be aligned left.
    5. A white background can be added to the Hero. Use the Container component to add this styling.
    6. Search Hubs: If you have the 5th step enabled, you can add the url of a search results page in the redirection path authoring.
      1. Agency all search hub should appear from a search bar and results are not displayed automatically.