Application Header
Search the component library

Application Header


An application header contains and displays global tools and navigation. Use a header for every app. Be sure to display the relevant mode of this header to provide a consistent experience.

Signed out mode

This is the simplest version of the header, just displaying the Pearson logo (with no link interaction), the Shopping Cart icon, the Help icon, and a Sign in link. The Help icon is designed to trigger the Contextual Help component.

Use this mode when the user is signed out.

Signed out mode

Standard mode

Represents the default signed in experience. Expands on the Signed out mode by making the Pearson logo a home link (currently and including the User Menu.

The User Menu is labeled with the user's first name and contains Account Settings, Policy, and Sign out options. At widths less than 768px the user's name is replaced with a profile icon.

The Shopping Cart icon remains in the header for students on top level pages. It is removed for instructors or students when they are on pages within a product experience.

Use this mode when the user signs in to a standard Pi session and needs a default header experience.

Policy links

By default the header links to the standard Terms of Use and Privacy Policies. An application may include additional policy links if necessary below these.

Standard mode

Mobile version of the header is slightly shorter.

Integration mode

In this version of the header many options are removed that aren't relevant in cases where a user is linking their account to a 3rd party (e.g., Blackboard, Canvas, or other LMSs). The logo is no longer a link and the right side of the header only contains a Help link.

Use this mode when the user's session is managed by a third party and the user shouldn't have access to platform session features (e.g., Sign out, My Account). Specifically, this applies to 3PL/LMS integration scenarios.

Integration mode

Integration mode


Signed out mode

≥ 768px (medium and larger viewports)

Logo linkNo active link
Dimensions70px tall
100% viewport width
Logo37px tall, vertically centered
SpacingLogo, links, and icons vertically centered
15px from either end
26px between link/icons
Icons get a 44px square tap zone
Icons next to each other are positioned such that their tap zones are immediately adjacent
BackgroundWhite (#ffffff)
1px solid Moonlight bottom border
TypographyLinks are Bold UI Text in Medium Gray
StatesFocusing an icon or link uses the default browser style
Hovering or focusing an icon or link changes the color to Charcoal
IconsHelp icon is help-fill-18
Shopping cart is shopping-cart-18
Shopping cartVisible for all users
Follow the notification badge styles below

< 768px (Small and Extra Small viewports)

Dimensions60px tall
Logo30px tall

Standard mode

≥ 768px (M, L, and XL viewports)

Spacing and dimensionsFollow Signed out mode specs
Icons are positioned such that their tap zones are immediately adjacent
NotificationsUses notification-18 icon
Badge dimensions are 16px tall with 6px horizontal padding
Active badge is Hot Pink background with White Small Bold UI Text
Inactive Badge is Alto background with Charcoal text
2px White outer border
Account menuOpens the standard drawer (which will appear full height)
Links are Basic UI Text with the standard link style
Sign out button is a Large Primary button
StatesSame as Signed out mode
Shopping cartHidden from instructors
Visible on top level screens for students (not within product experiences)
Uses the same badge style as the notifications system

< 768px (Small and Extra Small viewports)

Profile iconUser's name replaced with the person-18 icon

Integration mode

Identical to Signed out mode, without the 'Sign in' link.

Print style

Menu and iconsHide
BackgroundMake transparent
LogoSwitch to smaller 30px size
PositioningLeft align with the default print margin



Parker Malenke

  • ADDED: Shopping Cart icon and link


Parker Malenke

  • ADDED: Print styles to the redlines section
  • FIXED: Logo coloring


  • ADDED: Feature links
  • FIXED: Notification background color


  • FIXED: Clarified redlines
  • FIXED: Breakpoints in the redlines
  • ADDED: Symbols


  • CHANGED: Background color to white


  • ADDED: Terms of Use and Privacy Policy links


  • CHANGED: Adopt rebrand style


  • CHANGED: Use colors component
  • CHANGED: Use typography component
  • ADDED: Details on local nav item truncation
  • ADDED: Details on focus and hover states
  • ADDED: .ai mockup file
  • ADDED: Dependency list and references
  • ADDED: Exported styles


Initial release