Task banners

Task banners are designed to feature actions a user can take to complete tasks. They are most commonly used on the home page or landing pages.

Banners overview
Messaging banners
Tasks banners
Content banners

Standard scope

This standard applies to:

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

Overview

Tasks banners are typically used to:

  • Feature desirable tasks: Help users find actions to take.
  • Support task completion: Guide users to complete essential actions.
  • Provide guidance: Lead users to additional details.

Use cases

The following table provides a summary of use cases for task banners. Visual examples for each banner type and a list of content elements are also provided.

Banner type
Design System name
When to use
Grid layout
Task banner
Banner-Tasks
Used to highlight optional user tasks or action items that are a desirable next step in relation to the other content on the page.  
12 col: 1 banner per row

8 col: 1 banner per row
Footer banner
Banner-CTA-Footer
Used to drive a primary call to action at the bottom of a page. Variations include including mandatory inputs, use of buttons to specify actions and use of links for guidance or to learn more details.  
12 col: 1 banner per row

8 col: 1 banner per row
Print banner
Banner-Print
Used to display messaging intended for print-friendly views or other outputs. Note that users can also still trigger the print action using normal keyboard navigation.
12 col: 1 banner per row

8 col: 1 banner per row

Tasks banner

The tasks banner features two tasks, separated by a visual divider line, with each task consisting of the following elements:

  • Icon 
  • Title
  • Body copy
  • Arrow link

Footer banner

The footer banner is always positioned at the bottom of the page with a primary call to action and includes the following elements:

  • Title
  • Body copy
  • Single CTA button or button stack
  • Input field with CTA button
  • CTA link (when there is no button)

The following example prompts the user when additional information is needed.  

This next example shows the use of a single CTA button.  

A mini version of the footer banner has minimal text and uses a CTA link to direct the user.

Another CTA link example encourages the user to learn more details.  

Printer banner

The print banner consists of the following elements:

  • Print icon
  • Text link

Behavior

Tasks Banner

Interactive

Interactive banners indicate interactivity solely through the presence of an arrow link.

States

Hover state: CTA text changes color or underlines upon hover to indicate interactivity.

Footer Banner

Interactive

Interactive banners indicate interactivity solely through the presence of a link or CTA button / button stack.

States

  • Hover state: For interactive banners, the CTA button changes color when hovered over.
  • Input field hover state: The input field changes its border color upon focus.

Print Banner

Interactive

Clicking the print banner opens the print dialogue in the user browser.

States

Hover State: The text label and icon may change color to indicate interactivity.

Customizable  elements

The task banners 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.

Tasks banner

Element (for each of the 2 tasks)
Required/Optional
Guidelines
Specs
Icon
Required
Represents the action visually. Use standard system icons.
54*54px
Title
Required
Clearly describes the task. Keep concise and scannable.
Recommend max 1 line
Body copy
Optional
Provides a brief, helpful description. Keep it succinct.
Recommend max 3 lines
Arrow link
Required for interactive banners
Always a simple arrow, no text.
24*24px

Footer Banner

Element
Required/Optional
Guidelines
Specs
Title
Required, except for mini banner
Keep titles concise and scannable. Use sentence case and avoid unnecessary punctuation.
Recommend max 2 lines
Body copy
Optional
Concise text element that accompanies the title copy that adds more context for the user.
Recommend max 4 lines
Input field
Required when input is needed for CTA action.
Input fields must be accessible and clearly labeled
Recommend to display max 12 characters but allow for max 60 character input
CTA link
Required for interactive banners, unless using buttons. Do not use with CTA buttons.
Use action-oriented words such as “Learn more”.
Recommend max 14 characters
CTA button stack
Required for interactive banners, unless using links. Do not use with CTA links.
CTA buttons should be clear, and action driven. Maintain a hierarchy in multi-button banners.
Single button or two-button stack. Recommend max 14 characters per button

Print Banner

Element
Required/Optional
Guidelines
Specs
Print icon
Required
Use a universally recognized print icon. or other icon if used for another purpose other than printing.
24*24px
Text link
Required
Clearly state the function. Use sentence case.
Recommend max 16 characters

Guidelines (do’s and don’ts)

Do
  • Use clear, actionable language in the link text and button to encourage interaction with the user.
  • Use icons to reinforce meaning, but ensure accessibility.
  • Use consistent iconography and labeling across all implementations.
  • Keep input fields accessible.
Don't
  • Overload the banner with excessive text—keep messages concise and actionable.
  • Exceed one link or two buttons.

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