Help

The help component keeps pages easy to scan by showing detailed guidance only when users choose to view it. 

The component reveals and hides guidance when a user engages with a question mark button. The guidance is initially hidden when a page loads. 

<button class="asp-help asp-js-toggle-button" type="button" aria-expanded="false" data-toggle-element=".hint-example-1" style="display:none">  
  <span class="sr-only">Help</span>  
  <span aria-hidden="true">?</span>  
</button>  
  
<!-- not part of the nunjucks template -->
<div class="hint-example-1">
  <p>Hidden content</p>
</div>

When to use this component

Use the help component to provide guidance to users without affecting the layout and scannability of the page. This could include guidance that experienced users would not need and would impede their use of the service.

When not to use this component

The help component hides content from users. It may be that users do not notice the component or understand how it works. As such, it should be used sparingly and only in specific situations supported, where possible, by user research. 

Before you use this component, consider: 

• Testing content with other components first, as these may be better suited for displaying content 
• Re-writing content to reduce its length 
• Displaying guidance as hint text under the question

The help component was specifically designed for the Assure application.  

Assure has two audiences: those who know how to use the application well, and those who do not. The purpose of the Help component is to reduce the amount of visible content on the page, focusing attention on the question set, while allowing users access to contextual guidance if needed.  

Our preferred approach for this type of content is to place hint text directly under the question, so users can see it when the page loads. 

Example of where we have used this component

This component is used on:

• Assure

This list is not exhaustive.

Technical notes

This component uses JavaScript. When JavaScript is not available, users will see the content displayed as standard paragraphs.

This component can be used in dark mode.

Status of development

The criteria below must be met for a component to be approved for use within the ASP Digital Design System.

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 26 July 2024
Last updated 18 August 2026