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

    List Group

    The list group offers a visually stacked list of links, including titles and link icons.

    View this component in Figma

    Overview

    The list group presents a vertically stacked list of links. A list group can contain one or two columns.

    Each list item must include a title, a link destination, and a link icon. You can also include a leading icon, pretitle, and description.

    Usage

    When to use

    • Use a list group to highlight links based on category, subject, or audience.
    • Consider a list group for supplementary navigation.

    When not to use

    • Avoid list groups for unordered, or bulleted, lists within running copy. List groups are designed as a separate component.
    • Only use a list group when each list item has a link. 

    Accessibility

    All links must have meaningful link text.

    Related components

    We want to hear from you

    This is a pre-release version of Keystone Design System. If you're a beta tester, we want your bug reports, questions, and feedback.

     

    Complete our form to share your thoughts—just log in with your PA.gov email. We'll review and consider every response.

    Send feedback to the KDS team