Skip to main content

Official website

of the Commonwealth of Pennsylvania

    The .gov means it's 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. 
    Components

    Hero

    The hero component holds a central position on a page. It provides important context about the page's contents.

    Overview

    The hero component holds a central position on a page, at the top of the screen under the header. It introduces the purpose of the page with helpful content like a title, copy, an image, and a call to action.

    Formatting

    Anatomy

    View of the hero with markers numbering 1-3
    1. Teaser: This can include multiple pieces of text, including a pretitle, title, and body copy.
    2. Call to action (optional): The call to action can provide several options for actions that users can take. 
    3. Image (optional)

    Variations

    The hero can be configured many different ways to suit the needs of the page. The hero accommodates desktop and mobile breakpoints, including tablet and phone.

    Image justification

    On desktop, the image can appear on the left or on the right. On mobile breakpoints, the image is always on top.

    Calls to action

    These types of calls to action are available in the hero component:

    • None
    • Button
    • Button group
    • Link

    Behavior

    Desktop breakpoints (large, medium)

    The hero component spans 5 columns of the 12-column grid.

    A sample hero on desktop with a 12-column grid overlay

    Mobile breakpoints (small, extra-small)

    The hero component spans 6 columns of the grid for the small breakpoint. It spans 4 columns of the grid for the extra-small breakpoint.

    View of the hero on tablet view and phone view with their respective column layouts