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
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.
The signed out header has one style that works for every breakpoint.
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 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.
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.
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
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Signed Out Mode | [](/design/c/application-header/v2.0.0-beta.1/#rd-signed-out-mode) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Basic Mode | [](/design/c/application-header/v2.0.0-beta.1/#rd-basic-mode) |
Redlines for larger viewports
Identical to signed out mode, without the ‘Sign In’ link.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Integration Mode | [](/design/c/application-header/v2.0.0-beta.1/#rd-integration-mode) |
Initial release
Application Header