Application Header
Search the component library

Application Header

v1.1.0

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
  • Local navigation for courses (at mobile breakpoints)
  • 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 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.

Options

Remove sign in link

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.

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 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.

Options

Course listing

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.

Course Mode

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.

Options

Course 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.

Light theme

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.

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

Redlines

Signed Out Mode

≥ 768px (medium and larger viewports)

Logo linkNo active link
Dimensions54px tall
100% viewport width
SpacingLogo and links vertically centered
30px from either end
30px between links
BackgroundBlack (#000000)
TypographyLinks are large labels (inverse primary color)
StatesLinks use the browser default style for focus
Hovering shows the hand icon, but otherwise no style change

< 768px (Small and Extra Small viewports)

Dimensions44px tall
Spacing14px from either end
14px between links

Basic Mode

≥ 1024px (L and XL viewports)

Logo Linkwww.console.pearson.com
Dimensions54px tall
100% viewport width
Dropdown menu is 250px wide
Menu items are 48px tall
Menu dividers are 1px
Dropdown tab is 42px tall
Cap over tab is 2px tall
SpacingLogo and links vertically centered
30px from either end
30px between links
8px between username and chevron-down icon
Dropdown tab has 15px of horizontal padding
ColorsMain bar is Black (#000000)
Dropdown background is Gutenberg Black (#333333)
Divider lines in dropdown are Asphalt (#3f3f3f)
Cap on username is Smoke Gray (#545454)
TypographyTop level links are large labels (inverse primary color)
Menu items are large labels (inverse secondary color)
StatesLink focus states use the default browser implementation
Hovering an item in the dropdown menu will show an underline

768px – 1023px (Medium Viewport)

Username is truncated to no more than 20 characters

Redlines for larger viewports

480px – 767px (Small Viewport)

Dimensions44px tall
100% viewport width
Dropdown menu is 250px wide
Course items in menu are 60px tall
Other menu items are 48px tall
Divider lines are 1px tall
Dropdown tab is 36px tall
Cap over tab is 2px tall
SpacingLogo and links vertically centered
14px from either end
28px between links
8px between link and icons
Dropdown tab has 14px of horizontal padding
ColorsSame as larger viewports
TypographyTop level links are large labels (inverse primary color)
Course items are large labels (inverse primary color)
Other menu items are large labels (inverse secondary color)
Course ListIf more than 5 items, add a 'Show X more courses...' item at the bottom

< 480px (Extra Small viewport)

Dropdown menu becomes 100% wide

Redlines for smaller viewports.

The 'Show X more courses...' item.

Course Mode

≥ 768px (Medium and larger viewports)

Follow the Basic Mode specifications.

480px – 767px (Small viewport)

At this size the course navigation appears in the dropdown.

Logo Linkwww.pearson.console.com
DimensionsAll courses link is 48px high
Local nav options are 44px tall (incl. header)
SpacingTop level links, and heading, have 20px horizontal padding
Local nav options have 30px left padding, 20px on the right
Heading has 9px top padding
All Courses has 8px padding for the icon
ColorsMain dropdown background is Gutenberg Black (#333333)
Local nav background is Full Moon (#424242)
Divider lines are Asphalt (#3f3f3f)
TypographyAll Courses link and standard menu items are large labels (inverse secondary color)
Course name is basic title (inverse)
Local nav items are basic labels (inverse secondary color)
Active nav item is bold label (inverse primary color)
Local nav items truncate, rather than wrap to more than one line
StatesFollow the Basic Mode specifications

< 480px (Extra Small viewport)

Same as above, dropdown just becomes 100% wide.

Light theme

ColorsHeader bar is Off White (#f2f2f2)
Main dropdown background is Brightly Lit (#e6e6e6)
Local nav background is Off White (#f2f2f2)
Dropdown cap is Boring (#a6a8ab)
Divider lines are Hairline Gray (#d0d0d0)
TypographyTop level links are large labels (primary color)
All courses and other menu items are large labels (secondary color)
Course heading is a basic title
Local nav options are basic label (secondary color)
Active nav option is bold label (primary color)

Integration Mode

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

Changelog

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