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.
Features
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:
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.
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.
Example standalone article. Note there is not an option to go back to the overall Help List from here.
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.
Content may be grouped into accordions which help organize and condense information.
Example of accordions.
| 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) |
Contextual Help