Help

The Help component lets users show and hide text.

The component opens and closes when a user engages with the question mark button. The component will be closed 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 component to help users understand what information they need to answer a question.

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. For this reason, you should use it 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 the content as hint text under the question. This approach is used on Formation forms.

The component was specifically designed for the Assure application.

The application has two audiences: those who know how to use the application, 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 to interact with support content if they need to.

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

For users of screen readers, the text in the button will be read as a single statement, and the call-to-action will be announced as ‘button’.

Status of development

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

Submit a request

Request a change or addition to the design system use this form.

Published 26 July 2024
Last updated 22 July 2025