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 link, and (optionally) a Sign In link. The help link is designed to trigger the Contextual Help component.
Use this mode when the user is signed out.
There is a single configuration option to remove the “Sign In” link. Use this option when displaying the sign in link in the header would be redundant (e.g. on the actual sign in page).
The signed out header has one style that works for every breakpoint. Shown with and without the sign in link.
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 My Account and Sign Out options. At widths less than 768px it is condensed into the Mobile Menu which relabels the dropdown as “Menu” and extends it with a list of courses (if the consuming app has that information).
Use this mode when the user logs in to a standard Pi session and needs a default header experience.
The Mobile Menu can display a list of Next Gen courses for the current user. If the list is longer than five items in length it’s truncated and a “See X more courses” item is added at the bottom.
Use this when the consuming application contains a list of courses for the current user.
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 with the course listing.
At desktop sizes this is identical to the Basic Header.
The Mobile Menu gains an “All Courses” link and any local navigation for the course.
The Course Mode also offers the ability to enable a light theme.
Use this mode when a user launches a specific product (such as Revel, Pearson Reader, etc.) with local navigation.
At narrower breakpoints the Mobile Menu should contain the navigation for the course. The title of the current course will head this section. Use this option when the course offers any high level local navigation options.
The header can switch it’s color from black to a light gray. This option should be used when the user is viewing a reading, assessment, or some other type of content which requires their complete focus.
Course mode with the light theme at < 480px; standard course mode at 480px – 767px.
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/v1.1.0/#rd-signed-out-mode) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Basic Mode | [](/design/c/application-header/v1.1.0/#rd-basic-mode) |
Username is truncated to no more than 20 characters
Redlines for larger viewports
Dropdown menu becomes 100% wide
Redlines for smaller viewports.
The ‘Show X more courses…’ item.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Course mode | [](/design/c/application-header/v1.1.0/#rd-course-mode) |
Follow the Basic Mode specifications.
At this size the course navigation appears in the dropdown.
Same as above, dropdown just becomes 100% wide.
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/v1.1.0/#rd-integration-mode) |
Initial release
Application Header