Cards overview
Vertical card
Horizontal card
Rating card
Listing card
Standard scope
This standard applies to:
- pennmedicine.org
- All Penn Medicine websites
- Penn Medicine mobile applications
- All Penn Medicine digital products
Overview
Cards and card sets are typically used to:
- Provide information: Provides a summary of content, often with one or more links to more details.
- Display images: Features an image or icon related to the content.
- Organize content: Grouped and displayed for users to understand and compare important information.
- Make information scannable: Helps users quickly absorb key details.
Use cases
Card set type
When to use
Design options
Vertical cards are compact components that present brief content summaries with images, titles, text, and links. They use a clear visual hierarchy for easy scanning.
- Vertical card set
- Large icon card set
- News card set
- Multimedia card set
- Featured news card set
- Meet-the-team slider
Horizontal cards are presented in a landscape layout and are desirable when your text carries more insight than images can convey. They are also ideal for media integration and usually include structured call-to-actions (CTAs).
- Horizontal card set
- Location card set
- Condition card set
- Featured card set
- Location schedule card set
- Services card set
- Testimony card set
- Testimony slider set
- Providers card set
- News search result card set
- Simple icon card set with 2 column option
The ratings card set is designed to showcase user reviews, testimonials, and ratings in a structured format.
- Rating card set
The listing card set is designed to present multiple links to related content in a clean, scannable format.
- Listing card set
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
Last updated
Date
Version
Description
05/01/2025
1.0.0
Initial Release