Media and social sharing

Media components include images, image galleries, audio and video elements. Social sharing components make it easy for users to extend the reach of media and other content.

Standard scope

This standard applies to:

  • pennmedicine.org
  • All Penn Medicine websites
  • Penn Medicine mobile applications
  • All Penn Medicine digital products

Overview

Media components are typically used to:

  • Enhance storytelling: Support written content with engaging visuals, audio, or video that provide additional context or emotional connection.
  • Promote featured content: Draw attention to key stories, campaigns, or educational materials through embedded media players.
  • Support user engagement: Allow users to listen to podcasts or view videos.
  • Expand accessibility: Offer alternative ways for users to consume information, including audio narration or transcripts for videos.

Social sharing components are used to:

  • Extend reach: Make it easy for users to share important Penn Medicine content across Facebook, Instagram, YouTube, LinkedIn, X (Twitter), and Threads.

Use cases

Media and social sharing components are used to support user engagement, education, and content sharing. The table below outlines when each component should be used.

Media type
Design System name
When to use
Media player
Media-Player
Used to embed a podcast or other audio file.
Video
n/a
Video media is included on web pages using standard YouTube embed capabilities, normally in a body copy section.  There is no design system component. All embedded videos must be hosted on the Penn Medicine YouTube channel.
Image full width
Image-FullWidth
Used when an image provides significant information to the user without the need for words or other components.
Image gallery
Image-Gallery
Used to allow users to browse through a gallery of relevant images.
Image logo
Image-Logo
Used to feature icon-only content such as awards.
Social bar
Social-Bar
When you want to allow users to share the page to major platforms like Facebook, Instagram, etc.

Media player

The Media player includes the following elements:

  • Title block
  • Audio player
  • Link

Video

The following example illustrates embedding of video in body copy using standard YouTube embed capabilities.

Image full width, image gallery and image logo

The image components may include the following elements:

  • Image
  • Title
  • Body copy
  • Link

Social bar

The social bar includes the following elements:

  • Text
  • Icon button for branded sharing buttons

Behavior

Interactive

  • Media player allows users to:
  • Play and pause the audio.
  • Adjust the volume.
  • View the time elapsed and click within the progress bar to jump to a different point in the audio.
  • Open the kebab menu for more options
  • Video capabilities align to the platform where the video is hosted, such as YouTube.
  • Image gallery allows users to progress forward and backward through the gallery.
  • Image logo allows users to highlight logos of 3rd parties which may include awards, accreditations, and partners.
  • Social bar is interactive through clickable icons, each opening the selected social platform’s sharing interface in a new browser tab.

Non Interactive

  • Full width images are non-interactive

States

  • Hover state: Buttons and icons highlight on hover to show interactivity.

Customizable  elements

Media and social components use a fixed structure with customizable copy. The design includes predefined elements that cannot be removed or rearranged.

Image, image gallery and image logo

Element
Required/Optional
Guidelines
Specs
Image full width
Required
Aligned to brand standards and is meaningful to the user without the addition for other design elements.
Image scales proportionally to fit screen width while maintaining aspect ratio.
Caption
Optional
Keep captions short.  Explain what the image shows, especially if it includes equipment, people, or procedures.
Positioned beneath the image; scales with layout.
Image gallery title block
Optional
Introduces the gallery content
Recommend max 1 line
Image gallery body copy
Optional
Provides additional information about the gallery of images
Recommend max 3 lines
Image gallery
Required
1 big image and 2 side images
Link
Optional
Links to additional relevant content
Recommend max 20 chars

Media player

Element
Required/Optional
Guidelines
Specs
Title block
Required
Use to introduce the content
Title & body copy
Title
Required
Must match audio content
Max 50 character recommended
Description
Required
Short summary of the audio file
1–2 sentences
Audio file
Required
Must meet accessibility requirements
MP3

Social bar

Element
Required/Optional
Guidelines
Specs
Icons
Required
Include all relevant social media icons.
12 col
8 col right
8 col center

Guidelines (do’s and don’ts)

Do
  • Use the title block to introduce the content and give context to the media.
  • Select images that are relevant and provide value without additional text or other design elements.
  • Include audio and video that is relevant to the page or topic the user is exploring.
  • All videos embedded on the web must be hosted on the Penn Medicine YouTube channel.
  • Use the social sharing links at the end of an article or page, after a user has absorbed the value of the content.
Don't
  • Embed third-party media players with inconsistent styling.
  • Autoplay audio without user interaction.
  • Link to inactive or unapproved social accounts.

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