Ratings card set

The ratings card set is designed to showcase user reviews, testimonials, and ratings in a structured format. It enhances credibility and trust by displaying authentic feedback, helping users make informed decisions.

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

Rating cards are typically used to:

  • Provide information: Displays user testimonials highlighting real user experiences.
  • Display graphic representation of rating: May include visual star indicator alongside a numerical score to represent ratings.
  • Organize content: Structures ratings and reviews in a clear, concise format for easy readability.
  • Make information scannable: Ensures feedback is digestible by breaking it into structured sections that improve engagement and trust.

Use cases

The rating card set is generally used on pages and other content types when user reviews are relevant and add value.

Card set type
Design System name
When to use
Grid Layout
Rating card set
CardSet-Rating
To help users browse ratings and reviews for a specific type of content.
Listing view:
12 col: 1 card min.
8 col: 1 card min.

Grid view:
12 col: 2 card pero row max
8 col: 2 cards per row max

Rating card set

The rating card includes the following elements:

  • Name
  • Date
  • Body copy
  • Rating tag with star icon
  • Link text expander to view more information if the body copy exceeds 3 lines.    

The rating card set contains one or more rating cards. All cards should match the same properties to maintain visual harmony and a consistent user experience.

The rating card set may have a title and description, as well as a link to a more expanded set of rating cards or additional information. In addition, the card set may contain an average ratings section that includes average ratings, number of ratings and a disclaimer.

Rating content should come from a trusted source and should include a link detailing the source of the ratings and reviews.

Behavior

Non Interactive

Rating cards are non-interactive cards in our design system.  These cards are purely informational and serve to display content without prompting user interaction.

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.

Element
Required/Optional
Guidelines
Specs
Name
Optional
The name copy should be clear, consistently formatted use proper capitalization, readable typography, and ensure accessibility across different languages and cultures.
[Name] [Lastname]
Body copy
Optional
Text element that was authored by the named user.
Recommend max 3 lines
Date
Required
A date should be clear and consistently formatted as "Month Year" (e.g., May 2023).
[Month] [YYYY]
Rating tag and icon
Required
The rating tag should provide a numerical and visual rating
Always right aligned
Expander link
Optional
Only and always used when body copy is present and exceeds 3 lines. Clicking on the link will expand the body copy to show all available text, no limit.
Always right aligned
Card set title
Optional
Serves as a section heading for the cardset. Keep concise and scannable. Use sentence case and avoid unnecessary punctuation.
Recommend max 1 line
Card set body
Optional
Provides a brief description or context for the cardset. Use short, scannable text to introduce the card grouping.
Recommend max 4 lines
Card set tag and icon
Optional
Provides a numerical and visual presentation of average ratings for all reviews.
Always left aligned and together in solid colored block.
Card set tag
Optional
Provides a numerical view of total number of reviews.
Bold text
Card set disclaimer copy
Required
Standard disclaimer copy with a link to the website or documentation of the trusted source of rating and review data.
Recommend max 6 lines
Card set expander link
Optional
When more reviews are available. Clicking on the expander link will reveal increments of additional cards, expanding the length of the page.
Recommend "See more reviews (nn) +" where nn is the total number of reviews available.  

Guidelines

Do
  • Include the minimum mandatory elements for the card. You should always display date and rating.
Don't
  • Leave off date or rating.

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
Penn Medicine, Philadelphia, PA 800-789-7366       © 2025       The Trustees of the University of Pennsylvania