Standard scope
This standard applies to:
- pennmedicine.org
- All Penn Medicine websites
- Penn Medicine mobile applications
- All Penn Medicine digital products
Overview
Listing cards are typically used to:
- Provide information: Displays content in a structured format for easy reference and selection.
- Organize content: Groups related content to improve usability and discoverability.
- Make information scannable: Ensures users can quickly browse and navigate to additional information with clear link formatting.
Use cases
The listing card set is desirable when minimal information is needed for the user to make a selection, and when optional grid layouts are desirable.
Design System name
CardSet-Listing
Small list: 3 cards/row max
Large list: 2 cards/row max
8-col
Small list: 2 cards/row max
Large list: 1 card/row max
Listing card set
The listing card always only includes the following elements:
- Title, as link text
- Icon indicating whether page is within the website or external
The listing card set contains one or more listing cards. The card set may include an independent title and description, as well as a link to an expanded set of cards or additional information.
All cards should match the same properties to maintain visual harmony and a consistent user experience.
Behavior
States
When hovered, the card component displays a dark blue underline beneath the title to signal that the card is clickable.
Customizable elements
This component offers a flexible structure, allowing for customization of content. The layout supports a variety of elements that can be toggled on or off to create a tailored experience. Below are the key components of the design.
Vertical card set
Guidelines
Do
- Include all the elements. There are no alternative variations of this card
- Include a “View all” CTA if more items exist.
- Keep links across all cards consistent, either internal or external.
Don't
- Exceed 50 characters for the title of this card.
- Overload the component with too many links—keep it scannable.
- Use vague link titles that don’t clearly describe the content.
- Mix cards with internal and external links.
Related resources
For designers: Visit the Designers section for access to component specs and Figma files.
For developers: Visit the Developers section for implementation details and to access the front-end code library in Storybook.
Contact
For more information about this standard, email: web-standards@pennmedicine.upenn.edu