Contextual Help
Search the component library

Contextual Help

v2.0.0

Contextual Help allows users find answers to their questions without having to open a separate Help system in a new tab. Use this component with every URL to present Help and Support articles within the product.

Help list

Displays a listing of Help articles relevant to the current URL. Common functionality includes:

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

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

Note: At a minimum, configure the two default items in the Help list.

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

Accordions

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

Example of accordions.

Redlines

Help list

ContainerDrawer: Standard view
Spacing25px margin above article title and below article excerpt
TypographyArticle title is a UI Text - Bold
Article excerpt is (#6A7070) UI Text - Basic
Excerpt length is limited to 80 characters
ContentFinal item in list is always the standard 'Contact Support' article

Article detail

ContainerDrawer: Detailed view for articles from the Help list
Drawer: Standard view for standalone articles
Title is 'Help Topic' for standalone articles
Typography1st level title is a UI Headings - Section - Basic
2nd level title is a UI Text - Bold
Main content is (#6A7070) UI Text - Basic
Lists, italics, bold, and other basic typography features follow the standard Typography component styles

Accordion

Spacing25px above, below and between accordions
25px separating the title from accordion content
12px padding between icon and title
TypographyTitles are UI Text - Bold
Main content is (#6A7070) UI Text - Basic
Accordion content follows the same type style as the surrounding text
Pearson icons[pivot-close-18] for unopened items
[pivot-open-18] for opened item
BehaviorUsers can open accordion items independently from each other (i.e. opening an item doesn't autoclose other items that are already open)

Changelog

2.0.0

  • CHANGED: Change to new design

1.0.0

Initial version