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

    Card Group

    The card group component presents information as a series of cards. Each card includes a call to action, driving traffic to other destinations. The card group is useful for providing brief overviews and linking to a long-form reading experience.

    Overview

    This component includes a section heading, body copy, a call to action, and a group of cards.

    Formatting

    Anatomy

    Accordion anatomy diagram
    1. Headline
    2. Body copy
    3. Call to action
    4. Group of cards

    Variations

    Card types

    This component can display either media cards or icon cards. The card type must match across the entire card group; you can't mix media and icon cards in the same card group.

    Use the same card type for all cards within a single card group

    Use the same card type for all cards within a single card group.

    Don't mix card types within the same card group.

    Don't mix card types within the same card group.

    Cards per row

    Cards per row dictates the number of cards in a row. You can choose this based on total card number or breakpoint to avoid orphaning a single card in the last row.

    Note: Card groups contain a minimum of two cards. Use another component if you need to highlight a single item.

    Large and medium breakpoints

    Cards can be displayed in columns of two, three, or four for medium and large breakpoints.

    Accordion anatomy diagram

    Small and x-small breakpoints

    Cards are presented in a two-column layout for small breakpoints. For x-small breakpoints, all cards stack within a single column.

    Accordion anatomy diagram

    Example of a card group containing three cards across various breakpoints.

    Guidelines

    Card height

    The height of the tallest card in a group will determine the height for all cards.

    Accordion mouse interaction diagram

    All cards within a card group should be the same height, as determined by the largest card in the group.