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. 
    Components

    Image

    Image allows a single image asset to be displayed on the page. Images are adaptive; the relevant image width is selected for the screen size and lazy loading is available.

    Formatting

    Aspect Ratio

    The following image ratios can be set up in accordance with the responsive grid: 32:9, 16:9, 3:2, 4:3, 1:1, 3:4, 2:3.

     

    A view of each image ratio

    Modifiers

    Captions

    With the optional caption added to the Image component, an image can include a caption beneath to provide additional context. This caption should use Label/Small/Regular.

    A view of the 8px of padding between the image and caption

    Border

    A 1px inside border can be added to the Image component to help frame images. This is useful when the page background and image background are the same or similar colors. For image border color, use outline-variant.

    View of the 1px border around image

    Border Radius

    A 32px border radius can be added to the Image component as a visual element.

    View of the 32px border radius around image

    Content Guidance

    Image is a foundational component and does not contain any additional content. Image with caption provides the opportunity for additional content, as shown in the following table.
     

    Element

    Content Type

    Recommended Character Limit

    Caption (optional)

    Text

    40

    Media

    Image

    –

    Accessibility

    Alt Tags

    • If the image does not provide information essential to understanding the content, use an empty alternative (alt="").
    • If the image provides information essential to understanding the content, fill in the alternative with the necessary information (alt="@alternative").

     

    There are several types of images categorized by how to provide appropriate text alternatives. Images must have text alternatives that describe the information or function represented by them in order to be accessible to those with disabilities.


    Use the WCAG Alt Decision Tree to decide how to use the alt attribute of the <img> element in various situations.