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

    Cards

    Cards are containers for concise information about a single subject. They can display featured information, related content, or navigational choices. In groups, cards present collections of similar content.

    Overview

    Cards present content with calls to action in a concise yet engaging style. Cards are usually part of a collection or list of previews of similar content. The card is never presented in isolation.

    There are two types of cards available, including Media Card and Icon Card.

    Formatting

    Media Card

    The Media Card component can be used in many different page types. The default design includes media, a heading and a call to action, and optional extras include tags and body copy. By adding and removing optional content, the card offers a wide range of design possibilities.

    Media Card anatomy diagram
    1. Media: Can be an image or a video.
    2. Tag: Add categories or special callouts to each card.
    3. Heading: Heading has the highest information hierarchy on a card, and should be succinct and descriptive.
    4. Body copy: Optional body copy can be added for additional descriptions. Text will truncate after three lines by default.
    5. CTA link: Can be used along with an icon to give more context. Alternatively, a right-arrow icon can be substituted for the CTA Link.

    Card Image

    Card images are built to fill the width of the card and proportionally scale the height of the images. It is recommended to use the 16:9 image ratio for media.

    Icon Card

    Icon Cards feature an Icon Object paired with a Heading, Body copy and call to action. Icons provide a lot of visual interest and can enhance the overall look of the page. They can support the user experience when paired with content that has common visual associations. However, keep in mind that meanings of icons can differ heavily across cultures, and so they should be selected and used carefully.

    Icon Card anatomy diagram
    1. Icon Object - icon placed above or to the left of the card title.
    2. Heading: Heading has the highest information hierarchy on a card, and should be succinct and descriptive.
    3. Body copy: Optional body copy can be added for additional descriptions. Text will truncate after five lines by default.
    4. CTA: Can be either a CTA Link (see Media Card example above) or right-arrow icon.

    Icon Orientation

    Icon Cards can have a vertical or horizontal icon orientation.

    Diagram showing the icon orientation within icon cards

    Layout

    Alignment

    Always horizontally align cards within a group from the left to the right side of the screen. The height of the largest card in a group will determine the height for all cards. When the horizontal space is limited, stack them vertically, while preserving their original order.

    Behaviors

    Interactions

    A card component does not have different states, since it consists of a static container on the page.

    Mouse

    Card containers are static, except for buttons or links.

    Card interaction diagram

    Keyboard

    Specific keyboard interactions will depend on the type of card you are using and what content it contains but all types of cards can take focus.

     

    KeyInteraction
    TabMove forward through the cards and interactive elements within the cards in a logical order
    Shift + TabMove backward through the cards and interactive elements within the cards in a logical order
    Return or EnterWhile interactive elements are in focus, their corresponding actions are performed.