Application Header
Search the component library

Application Header

v2.2.2

This component contains and displays global tools and navigation across the next gen platform.

Usage Guidelines

Every application that’s a part of the next gen platform should display the relevant mode of this header in order to promote a consistent experience.

Features

  • Pearson branding/navigate to home
  • Standard help link
  • Sign in/Sign out
  • My Account
  • Notification access
  • Accessibility best practices
  • Mobile ready responsive design

Signed Out Mode

This is the simplest version of the header, just displaying the Pearson logo (with no link interaction), 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

The signed out header has one style that works for every breakpoint.

Basic Mode

Represents the default signed in experience. Expands on the Signed Out Mode by making the Pearson Logo a home link (currently www.console.pearson.com) and including the User Menu.

The User Menu is labelled 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.

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

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.

Basic Mode

The desktop version of the basic mode header. (Note: Normally the mobile view would be used at this width, it has been compressed for illustration purposes.)

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

Redlines

Signed Out Mode

≥ 768px (medium and larger viewports)

Logo link
  • No active link
Dimensions
  • 70px tall
  • 100% viewport width
Logo
  • 37px tall, vertically centered
Spacing
  • Logo, 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
Background
Typography
States
  • Focusing an icon or link uses the default browser style
  • Hovering or focusing an icon or link changes the color to Charcoal
Icons

< 768px (Small and Extra Small viewports)

Dimensions
  • 60px tall
Logo
  • 30px tall

Basic Mode

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

Spacing and dimensions
  • Follow Signed Out Mode specs
  • Icons are positioned such that their tap zones are immediately adjacent
Logo Link
  • www.console.pearson.com
Notifications
Account Menu
  • Opens 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
States
  • Same as Signed Out Mode

< 768px (Small and Extra Small viewports)

Profile icon
  • User’s name replaced with the person-18 icon

Redlines for larger viewports

Integration Mode

Identical to signed out mode, without the ‘Sign In’ link.

Changelog

2.2.2

  • ADDED: Feature links
  • FIXED: Notification background color

2.2.1

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

2.2.0

  • CHANGED: Background color to white

2.1.0

  • ADDED: Terms of Use and Privacy Policy links

2.0.0

  • CHANGED: Adopt rebrand style

1.1.0

  • 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

1.0.0

Initial release