Vertical card set

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 sets group related cards in a single container, making it easy for users to explore similar content.

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

Vertical cards and card sets are typically used to:

  • Provide information: Provides a brief summary of content, often with one or more links to more details.
  • Display images: Features an image or icon at the top of the card.
  • Organize content: Grouped and displayed as a grid or list.
  • Make information scannable: Helps users quickly absorb key details.

Use cases

The following table provides a summary of use cases for each vertical card set type. Visual examples of each card set type are also provided.

Card set type
Design System name
When to use
Grid Layout
Vertical card set
CardSet-Vertical
To help users browse or compare similar content such as services, location information and other general information.  May also be used to feature a single item of content.
12-col: 3 cards/row

8-col: 2 cards/row
Large icon card set
CardSet-Icon-Large
To improve visual categorization of content types using icons. Example content types are service categories, groups, and other content with logical icon associations.
12-col: 3 cards/row

8-col: 2 cards/row
News card set
CardSet-NewsHub
For curating news articles.  Examples include articles, blog posts, announcements and press releases
12-col: 4 cards/row

8-col: 2 cards/row
Multimedia card set
CardSet-Multimedia-News
Features a hero video, podcast, audio recording or article with two supporting cards with similar content.
12-col: 1 featured (9-col) + 2 supporting (3-col)
Featured news card set
CardSet-FeaturedNews
Highlights one or more top news articles with a view of other articles and the ability to view more.
12-col: 1 to 2 featured (9-col) + 3 to 5 supporting (3-col)
Meet-the-team slider card set‍‍
Slider-Cardset
Used to introduce a group of featured individuals with the ability to view an entire team. All content should come from a trusted data source.
12-col: min 4 and max 8 cards in slider

8-col: min 4 and max 8 cards in slider

Vertical card set

The general-use vertical card always has a title and may include other common elements:

  • Image
  • Icon banner
  • Tag
  • Title
  • Body copy
  • Link text

The vertical card set contains one or more cards and may include an optional independent title, description and link to additional details. All cards in the set should match the same properties (image, title, body, etc.) to maintain visual harmony and a consistent user experience.

Large icon card set

The large icon card is a variation that features an icon along with other vertical card elements:

  • Icon
  • Title
  • Body copy
  • Link

The large icon card set contains one or more cards and may include an optional independent title, description and link to additional details.  Card consistency may vary:

  • Cards should generally match the same properties (icon, title, body, link)
  • Cards may or may not be homogenous. One or more cards may have a varied format to feature content within the card set.  

News card set

The news card is a vertical card variation that includes optional author and date elements. Content elements may include:

  • Image
  • Icon
  • Tags
  • Title
  • Body Copy
  • Link (external only)
  • Author and date

The news card set often contains more than one card and may include an independent title and description, as well as a link to a more expanded set of cards or additional information. Card Consistency:

  • All cards should match the same properties (image, tag, title, body, author, date, etc.) to maintain visual harmony and a consistent user experience.
  • None of the cards contain links; each card is clickable.  Cards with external links are also clickable.

Multimedia cardset

The multimedia card set features a prominent vertical card with other vertical cards in a list format. The multimedia card set is designed to feature video and podcasts media types on landing pages, including the homepage.  

Card Consistency:

  • All cards should match the same properties (image, tag, title, body, author, date, etc.) to maintain visual harmony and a consistent user experience, with the exception of the featured card which may have fewer elements.
  • None of the cards contain links; each card is clickable.  

Featured news card set

The featured news card set highlights top news or other priority content with an emphasis on recent or important updates. The featured information is in a list format. Additional news or content is included as vertical cards, also in a list format.  

Page placement:

  • Designed to be placed at the top of a page following the hero.

Card Consistency:

  • All featured cards should match the same properties (image, tag, title, body, etc.).
  • All supporting cards should also match the same properties, but do not need to match the properties of the featured cards.  
  • None of the cards contain links; the entire card is clickable.

Meet-the-team slider set

The meet-the-team card includes the following elements:

  • Image
  • Title
  • Tag
  • Link

The meet-the-team card slider set displays up to 5 cards in a carousel format. The slider set contains one or more cards and may include an optional independent title, description and link to view the team. All cards in the slider set should match the same properties to maintain visual harmony and a consistent user experience.

When there is more than one card in the slider set, the following elements will also be present, supporting automatic scrolling or manual navigation:

  • Navigational arrows to allow users to cycle through cards
  • Dot indicators to provide a visual cue for the number of cards

Card Behavior

Interactive

Interactive cards feature a gray underline and must include a link as a call-to-action. The link is in the form of link text or a simple stand-alone arrow. The stand-alone arrow is used for minimalistic cards containing only a title.  

Cards may contain multiple links within the body of the card but should also always include a link at the bottom to indicate that the card itself is interactive. Cards in a card set must either all include links or not include links.

Cards with only one link are clickable. Cards with multiple links are not clickable and the user must select a specific link to interact with the card

For meet-the-team slider card sets, arrows and pagination allow users to navigate through multiple team member cards.

Non Interactive

Non-interactive cards in our design system do not include a gray underline and do not feature any links as calls-to-action. These cards are purely informational and serve to display content without prompting user interaction.

States

Hover State: The gray underline transitions to dark blue, and the card's image displays a blue overlay to reinforce its interactivity.

Non-interactive cards do not have a hover state, maintaining a static appearance to indicate they are purely informational.

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

Element
Required/Optional
Guidelines
Specs
Title
Required
Keep titles concise and scannable. Use sentence case and avoid unnecessary punctuation.
Recommended max 4 lines
Body copy
Optional
Text element that accompanies the title copy that adds more context for the user.
Recommended max 4 lines
Image
Optional
Use high-quality, relevant images. Maintain consistent aspect ratios to align with other cards.
Aspect ratio 16:9
Icon banner
Optional
Use simple, recognizable icons. Ensure sufficient contrast for accessibility.
Full card width
Icon size: 32px
Tag
Optional
Use short, descriptive label. Ensure the tag provides meaningful context at a glance. Limit to one tag per card.
Recommended max 1 line
Link
Required for interactive cards
If linking to more detailed content, use action-oriented words such as “Learn more”. If linking to directions on a map, use the address of the location. If linking to a contact, use the phone number or email address, as appropriate.
If the card only contains a title, do not include link text and only use a simple arrow.  
Recommended max 1 line
Card set title
Optional
Serves as a section heading for the card set. Keep concise and scannable. Use sentence case and avoid unnecessary punctuation.
Recommended max 1 line
Card set body
Optional
Provides a brief description or context for the card set. Use short, scannable text to introduce the card grouping.
Recommended max 4 lines
Card set link
Optional
Allows a card set to have a unified CTA leading to more details with the link text providing context.
Recommended max 1 line

Large icon card set

Element
Required/Optional
Guidelines
Specs
Icon
Required
Use simple, recognizable icons. Ensure sufficient contrast for accessibility.
80*80 px for accent cards

54*54px for default card
Title
Requried
Keep titles concise and scannable. Use sentence case and avoid unnecessary punctuation.
Recommended max 2 lines
Body copy
Optional
Text element that accompanies the title copy that adds more context for the user.
Recommended max 5 lines
Link
Required for interactive cards
If linking to more detailed content, use action-oriented words such as “Learn more”.
If the card only contains a title, do not include link text and only use a simple arrow.  
Recommended max 1 line
Card set title
Optional
Serves as a section heading for the cardset. Keep concise and scannable. Use sentence case and avoid unnecessary punctuation.
Recommended 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.
Recommended max 3 lines
Card set link
Optional
Allows a cardset to have a unified CTA leading to more details about the grouped content. Should not replace individual card links.
Recommended max 1 line

News card set

Element
Required/Optional
Guidelines
Specs
Image
Optional
Use high-quality, relevant images. Maintain consistent aspect ratios to align with other cards.
Aspect ratio 16:9
Title
Requried
Keep titles concise and scannable. Use sentence case and avoid unnecessary punctuation.
Recommended max 4 lines
Body copy
Optional
Text element that accompanies the title copy that adds more context for the user.
Recommended max 5 lines
Icon
Optional
Use simple, recognizable icons. Ensure sufficient contrast for accessibility.
Aspect ratio 1:1
Tag
Optional
Use short, descriptive label. Ensure the tag provides meaningful context at a glance.
Recommended max 1 line
Author and date

Optional
Format names with lowercase letters, capitalizing the first letter of each name (e.g., "John Doe"). Dates should be written with the full month name, a two-digit day, and a four-digit year, without commas (e.g., "August 09 2023")If the card only contains a title, do not include link text and only use a simple arrow.  
[Name] [Lastname]
[Month] [DD] [YYYY]
Link
Required for external links
Use action-oriented words such as “Learn more”. The icon should be an external-link icon ( ⇱ ) for external pages
Recommended max 1 line
Card set title
Optional
Serves as a section heading for the cardset. Keep concise and scannable. Use sentence case and avoid unnecessary punctuation.
Recommended max 1 line
Card set link
Optional
Allows a cardset to have a unified CTA leading to more details about the grouped content. Should not replace individual card links.
Recommended max 1 line

Multimedia card set

Element
Required/Optional
Guidelines
Specs
Image/Thumbnail
Required
Use high-quality, relevant images. Maintain consistent aspect ratios.
Aspect ratio 16:9
Media icon
Required for video, podcasts and other audio.
Not used for articles.
Displays an icon indicating media type (e.g., audio, video).
Fixed icon size and placement
Tag
Required
Use short, descriptive label. Ensure the tag provides meaningful context at a glance.
Recommended max 1 line
Title
Required
Keep titles concise and scannable. Use sentence case.
Recommended max 2 lines
Body copy
Optional
Provides a brief description of the multimedia content. Keep text concise and engaging.
Recommended max 3 lines
Author and date
Optional
Format names with lowercase letters, capitalizing the first letter of each name (e.g., "John Doe"). Dates should be written with the full month name, a two-digit day, and a four-digit year, without commas (e.g., "August 09 2023")
[Name] [Lastname]
[Month] [DD] [YYYY]
Card set title
Optional
Serves as a section heading for the cardset. Keep concise and scannable. Use sentence case and avoid unnecessary punctuation.
Recommended 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.
Recommended max 3 lines
Card set link
Optional
Allows a cardset to have a unified CTA leading to more details about the grouped content. Should not replace individual card links.
Recommended max 1 line

Featured News card set

Element
Required/Optional
Guidelines
Specs
Image/Thumbnail
Required for featured cards
Use high-quality, relevant images. Maintain consistent aspect ratios.
Aspect ratio 16:9
Multiple image layout
Optional, as an alternative to satisfy the required image for featured cards
Supports one or more images in a flexible arrangement.
Fixed grid-based design fitting into aspect ratio of 16:9, same as one single image
Tag
Required for featured cards
Use short, descriptive label. Ensure the tag provides meaningful context at a glance.
Recommended max 1 line
Title
Required
Keep titles concise and scannable. Use sentence case.
Recommended max 2 lines
Body copy
Optional
Provides a brief summary of the featured news. Keep text engaging and informative.
Recommended max 2 to 3 lines
Author and date
Optional
Format names with lowercase letters, capitalizing the first letter of each name (e.g., "John Doe"). Dates should be written with the full month name, a two-digit day, and a four-digit year, without commas (e.g., "August 09 2023")
[Name] [Lastname]
[Month] [DD] [YYYY]
Card set title
Optional
Serves as a section heading for the cardset. Keep concise and scannable. Use sentence case and avoid unnecessary punctuation.
Recommended 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.
Recommended max 3 lines
Card set list section heading
Optional
Heading for sidebar of related or latest news cards.
Recommended max 1 line
Card set list section link
Optional
Follows the last news article in the listing and is used to allow the user to explore more news articles.
Recommended max 1 line

Meet-the-team card slider

Element
Required/Optional
Guidelines
Specs
Image
Required
Use high-quality, relevant images.
Aspect ratio 1:1
Title
Required
Keep titles concise and scannable. Use sentence case and avoid unnecessary punctuation. Must be populated from a trusted, credentialed data source.
Recommend max 16 characters
Tag
Optional
Use short, descriptive label. Ensure the tag provides meaningful context at a glance. Limit to one tag per card.
Recommend max 16 characters
Link
Required for interactive cards
Use action-oriented text such as “Learn more.”
Recommend max 1 line
Slider 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
Slider set body
Optional
Provides a brief description or context for the cardset. Use short, scannable text to introduce the card grouping.
Recommend max 3 lines
Card set link
Optional
Allows a cardset to have a unified CTA leading to more details about the grouped content. Should not replace individual card links.
Recommended max 1 line
Slider set dots and arrows
Required and only display when more than 1 card in the slider set
Allows users to navigate the cards in the slider.
Dots are right-centered below the displayed card. Number of dots reflects number of cards with max of 5.  Arrows are left-centered below displayed card.  

Guidelines

Do
  • Standardize the use of elements and maintain a consistent spacing and alignment for all cards within a set.
  • Ensure the icon is clear and relevant to the content or action.
  • Use concise, descriptive titles that are easy to scan.
  • Use clear, concise headlines that accurately summarize articles.
  • Include relevant images or media to enhance engagement.
  • Use high-quality images to enhance readability.
  • Ensure text is easily scannable and does not overwhelm the user.
  • Ensure the CTA is clear and action-driven for interactive cards.
  • For the common vertical card type only, use the simplified version of the link (a simple arrow) for minimalistic cards that only have a title.
Don't
  • Use both tags and icon banner at the same time.
  • Use icons that are overly complex or unclear
  • Use vague or misleading headlines that don’t reflect the article’s content.
  • Crop images poorly, cutting off important details.
  • Overload the card with excessive text—keep it brief.
  • Link to broken or outdated articles.
  • Include multiple conflicting CTAs within a single card.
  • For the common vertical card type only, use the simplified link when creating a card with more than just a title.
  • Alter card dimensions manually outside of design specifications.

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
Desciption
05/01/25
1.0.0
Initial Release
Penn Medicine, Philadelphia, PA 800-789-7366       © 2025       The Trustees of the University of Pennsylvania