Heroes

A hero (or hero section) refers to the prominent, topmost section of a webpage, typically located just below the navigation bar. It usually serves as the main visual and messaging area meant to capture the visitor's attention immediately

Standard scope

This standard applies to:

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

Overview

Heroes are typically used to:

  • Grab attention: Makes a bold statement with compelling visuals or headlines.
  • Reassure users: Confirms that users have come to the right place.
  • Improve user experience: Clearly orients users on what to expect.
  • Guide users toward action: Features options like clicking a button, signing up, or exploring more.
  • Support brand identity: Incorporates visual elements like shields, wordmarks and photography styles.

Use cases

Each hero variant is designed to support a specific user task or content type, but all are built from a shared set of components to ensure consistency across the design system. The following table provides a summary of use cases for heroes. Visual examples for each hero type and a list of content elements are also provided.

Hero type
Design System name
When to use
Hero home 
Hero-Home
Currently used on the pennmedicine.org homepage only.
Hero shield 
Hero-Shield
Used when you want to reinforce the Penn Medicine visual identity.
Hero find-a-doc 
Hero-FindADoc
Used when the primary goal is to help users find a provider. This hero may also be used for finding a staff member or other individual. The data must come from a trusted source.
Hero search 
Hero-Search
Used when the main user task is search.
Hero conditions
Hero-Conditions
Used when users need to browse and search. For example, when they may not know how to spell what they are searching for.
Hero image 
Hero-Image
Used to create a strong visual introduction with optional text or calls to action.
Hero provider 
Hero-Provider
Used when highlighting a provider, staff member or other individual.
Hero locations
Hero-Locations
Used when showing location-specific information.
Hero article  
Hero-Article
Used when presenting editorial or story-driven content.
Hero callout 
Hero-Callout
Used to highlight a welcome message or quote.
Hero underline
Hero-Underline
Used to create a minimal, bold layout with supporting body text and one or two actions.
Hero simple 
Hero-Simple
Used when a minimal layout is needed with a title and a clear single call-to-action.

Hero home

The home page hero layout is flexible and includes the following elements:

  • Title
  • Body text
  • Search
  • Image
  • Text tag
  • Background design

Example with background design.

Hero shield

The shield hero includes the following elements:

  • Title
  • Body text
  • Link
  • Search
  • Image
  • Background design

Hero find-a-doc

The find-a-doc hero includes the following elements:

  • Title
  • Body text
  • Image
  • Background design
  • Search

Hero underline

The hero with underline includes the following elements:

  • Title
  • Body text
  • Button
  • Background design
  • Underline design

Hero search

The hero for search includes the following elements:

  • Title
  • Search
  • Background design

Hero conditions

The conditions hero includes the following elements:

  • Title
  • Body text
  • A-to-Z filters
  • Search

Hero provider

The provider hero includes the following elements:

  • Image
  • Eyebrow
  • Title
  • Body text
  • Rating tag
  • Text tags
  • Services tags
  • Icon
  • Link
  • Buttons

Default and scrolled layout options are available.

Default

Scrolled

Hero locations

The locations hero includes the following elements:

  • Title
  • Buttons
  • Alert banner
  • Image
  • Map image
  • Links

Hero article

The hero for articles includes the following elements:

  • Breadcrumb
  • Image
  • Text Tags
  • Title
  • Subtitle
  • Author
  • Date
  • Background design

Example with centered image.

Example with background design.

Hero simple

The simple hero includes the following elements:

  • Title
  • Button

Hero image

The image hero includes the following elements:

  • Title
  • Body text
  • Image
  • Background design
  • Link
  • Search

Hero callout

The hero for callouts includes the following elements:

  • Title
  • Subtitle
  • Body text
  • Image
  • Text tag

Behavior

Interactive

Interactive hero elements help the user navigate the page.

  • Alert banners can be dismissed.
  • Buttons, links, text tags and breadcrumbs change appearance on hover and click.
  • Search – For more details on search refer to Search Controls.

Non Interactive

Non-interactive hero elements display information without allowing changes.

  • All eyebrows, titles, subtitles, body text, images and backgrounds are non-interactive.

States

  • On scroll, Hero Conditions and Hero Provider collapse into a persistent sticky bar.

Customizable  elements

The heroes offer 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.

Hero home

Element
Required/Optional
Guidelines
Specs
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Body text
Required
Provide brief context beneath the Title.
Max 3 lines
Image
Required
Use a high-quality, friendly image of a provider or other individual.
72–150 dpi & keep under 500 KB when possible
Text tag
Required
Include name and credentials.
Search
Required
For guidelines on search refer to Search Controls

Hero shield

Element
Required/Optional
Guidelines
Specs
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Body text
Required
Provide brief context beneath the Title.
Max 3 lines
Image
Required
Use a high-quality image framed in the Penn shield silhouette.
72–150 dpi & keep under 500 KB when possible
Search
Required
For guidelines on search refer to Search Controls
Background design
Required
Choose a background that complements the page layout and overall visual tone.

Hero find-a-doc

Element
Required/Optional
Guidelines
Specs
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Body text
Required
Provide brief context beneath the Title.
Max 2 lines
Image
Required
Use a high-quality image framed in the Penn shield silhouette.
72–150 dpi & keep under 500 KB when possible
Search
Required
For guidelines on search refer to Search Controls

Hero underline

Element
Required/Optional
Guidelines
Specs
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Body text
Required
Provide brief context beneath the Title.
Max 3 lines
Button
Required
Include one or two buttons that guide users to a key action.
Primary and secondary styles supported

Hero search

Element
Required/Optional
Guidelines
Specs
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Search
Required
For guidelines on search refer to Search Controls
Background design
Required
Choose a background that complements the page layout and overall visual tone.

Hero conditions

Element
Required/Optional
Guidelines
Specs
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Body text
Required
Provide brief context beneath the Title.
Max 3 lines
Search & A–Z index
Required
For guidelines on search refer to Search Controls
Background design
Required
Choose a background that complements the page layout and overall visual tone.

Hero provider

Element
Required/Optional
Guidelines
Specs
Image
Required
Use a high-quality image framed in the Penn shield silhouette.
72–150 dpi & keep under 500 KB when possible
Eyebrow
Required
Use to identify the department or specialty.
Placed above provider name
Title
Required
The provider’s full name and degree(s).
Max 2 lines
Subtitle
Required
Use to display the provider’s pronouns.
Rating tag
Required
Rating tag is always included, even if low or in the empty state
Text tags
Required
Include a minimum of 1 tag. Limit to 3 to maintain clarity.
Services tags
Required
Include a minimum of 1 tag. Limit to 3 to maintain clarity.
Icon
Required
Display the building icon next to the address to reinforce visual context.
Body text
Required
Include primary location address & distance.
Link
Optional
Link to view all locations if they have more than one.
Buttons
Required
When possible, include 2 options, a primary and a secondary.

Hero locations

Element
Required/Optional
Guidelines
Specs
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Button
Required
Include one or two buttons that guide users to a key action.
Primary and secondary styles supported
Alert
Optional
Use to display temporary information, such as service updates or travel delays, when relevant.
Full-width banner with a “Learn more” link and a dismiss button.
Image and map
Required
Use a high-quality exterior photo of the building.
72–150 dpi & keep under 500 KB when possible
Map
Required
Set scale to clearly show the surrounding area
Links
Required
Displays address, phone number, and operating hours with relevant icons

Hero article

Element
Required/Optional
Guidelines
Specs
Breadcrumb
Required
Show the user’s location in the site structure.
Full-width
Image
Required
Use a high quality image that visually sets the tone for the story.
72–150 dpi & keep under 500 KB when possible
Tags
Required
Include a minimum of 1 tag. Avoid excessive tagging.
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Subtitle
Required
Add secondary context or detail below the Title.
Max 2 lines
Byline
Required
Show author name and publication date.
Inline with text block
Layout
Required
Choose the layout that best suits the article.

Hero simple

Element
Required/Optional
Guidelines
Specs
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Body text
Required
Provide brief context beneath the Title.
Max 3 lines
Button
Required
Include one or two buttons that guide users to a key action.
Primary and secondary styles supported
Background design
Required
Choose a background that complements the page layout and overall visual tone.

Hero image

Element
Required/Optional
Guidelines
Specs
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Body text
Required
Provide brief context beneath the Title.
Max 3 lines
Link
Optional - Required if no button being used
Include one link guiding users to a key action.
Use the → symbol at the end of the link to indicate action.
Button
Optional - Required if no link being used
Include one button that guides users to a key action.
Primary styles supported
Image
Required
Use a high quality image that visually sets the tone for the page.
72–150 dpi & keep under 500 KB when possible
Search
Required
For guidelines on search refer to Search Controls

Hero callout

Element
Required/Optional
Guidelines
Specs
Title
Required
Clearly communicate the topic or focus of the page.
Max 3 lines
Use sentence case.
Subtitle
Required
Provide brief context beneath the Title.
Max 3 lines
Callout quote
Required
Include a quote, individual’s name, credentials, and title.
Image
Required
Use a high-quality image of the featured provider.
72–150 dpi & keep under 500 KB when possible

Guidelines (do’s and don’ts)

Do
  • Include all required elements as defined in the customizable elements table for each hero type.
  • Write clear, user-focused titles that reflect the purpose of the page or action.
  • Keep body text concise—no more than three lines—to ensure legibility and scannability.
  • Use high-quality imagery that reflects the professionalism and warmth of Penn Medicine.
  • Match the background and layout style to the tone of the page.
  • Ensure CTA buttons are clear and actionable, with the most important action placed first.
Don't
  • Leave out required structural elements, like titles or search inputs on search-first hero types.
  • Overload the hero with multiple CTAs—limit to two max, a primary and a secondary, to maintain clarity.
  • Use outdated or off-brand photos—all images should meet current brand photography standards.
  • Rely on hero imagery to communicate key information—titles and body text must carry the message.

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