Contextual Help
Search the component library

Contextual Help


Presents help and support articles within the product experience so that users can answer their questions without the interruption of opening a separate help system in a new tab.

Usage Guidelines

Every URL in the Next Gen platform should use the Contextual Help component, at a minimum configuring the two default items in the Help List.


  • Answer user questions without leaving the product experience
  • Present articles based on the user's current location
  • In-page triggers can jump directly to relevant article
  • Fully responsive and accessible

Help List

Displays a listing of help articles relevant to the current url. Every url in the next gen platform should offer a Help List through this component. Common functionality includes:

  • Universal access through the Header
  • Standard location of ‘Contact Support’ information
  • Articles relevant to the user’s current location and role

Selecting an article opens it within a detail view in the drawer.

Initially the drawer presents a list of contextual help and support articles for the page.

Selecting an article navigates into it, presenting the full content.

Standalone Articles

In situations where a feature or tool only appears on a url under certain conditions any related help content should be documented with a Standalone Article. This presents just the relevant article, without access to the overall Help List.

  • Standalone Articles must be accessed exclusively through Embedded Activation, described below.
  • Standalone Articles must not appear in the Help List.

Example standalone article. Note there is not an option to go back to the overall Help List from here.

Embedded Activation

Selecting the “Help” link in the App Header will open the Help List. You can also navigate directly to an article (either a standalone article or one from the list) through embedded activation.

A Help icon or a “Learn more” link can be used to activate an article from within the page. These should be positioned near the relevant portion of the page. Avoid mixing and matching both styles in the same page.

Two examples of controls that can be embedded in the page. Normally you wouldn’t mix and match the two styles like this.

Article Features


Content may be grouped into accordions which help organize and condense information.

Example of accordions.


Help List

  • 25px margin above article title and below article excerpt
  • Final item in list is always the standard ‘Contact Support’ article

Article Detail



  • 25px above, below and between accordions
  • 25px separating the title from accordion content
  • 12px padding between icon and title
Pearson Icons
  • [pivot-close-18] for unopened items
  • [pivot-open-18] for opened item
  • Users can open accordion items independently from each other (i.e. opening an item doesn’t autoclose other items that are already open)
Available Styles Reference As (How do I use this?)
Help List [](/design/c/contextual-help/v2.0.0/#rd-help-list)
Standalone Article [](/design/c/contextual-help/v2.0.0/#rd-standalone-article)
Embedded Help (Icon) [](/design/c/contextual-help/v2.0.0/#rd-embedded-help-icon)
Embedded Help (Text) [](/design/c/contextual-help/v2.0.0/#rd-embedded-help-text)



  • CHANGED: Change to new design


Initial version