Use an information component to place useful content in a journey without asking for an answer. It is ideal for explaining what happens next, giving context before a question, highlighting a time-sensitive instruction, or presenting a short tailored message based on earlier answers.

An information component does not collect data. If you need to store a value, choose an input component or a calculated component instead.

Choose a content format that matches the message

The component provides several presentation formats. Use the lightest treatment that makes the content understandable.

flowchart TD
  A[What should this content do?] --> B{Is it essential to complete the current step?}
  B -- Yes --> C[Put it in standard content near the relevant question]
  B -- No --> D{Is it useful only to some people?}
  D -- Yes --> E[Use expandable content with a clear summary]
  D -- No --> F{Does it describe a serious consequence or urgent action?}
  F -- Yes --> G[Use an important message]
  F -- No --> H[Use standard or inset content]

Write content that helps at the point of need

Make the content specific to the page and place it immediately before or after the decision it supports. Start with the action or fact the person needs to know, then add supporting detail.

For example:

Before you continue
Have your reference number ready. You can find it at the top of the confirmation email.

Avoid long blocks of background information between a question and its answer control. If people need extensive help, use an expandable section with a descriptive summary such as “How we use your reference number”.

Use Markdown, HTML and dynamic values carefully

Information content supports Markdown by default and can include dynamic values with Liquid. Markdown is usually the clearest way to add headings, lists, links and emphasis. Use HTML only when you have a specific need that Markdown cannot meet and you have checked the rendered result.

For a tailored message, reference a stable component ID:

Thanks, {{ first_name }}. You can now review your request.

Test dynamic content with a normal value, a long value, an empty optional value and characters that may need escaping. Do not put confidential data into a message unless the page and service access controls are designed for it.

If you switch the content-processing mode to HTML, treat the content as code: keep it small, use semantic elements, and test keyboard and screen-reader behaviour. Avoid copied fragments with unknown styling or scripts.

Configure expandable information well

Expandable content has a summary label and may contain nested content or media. The summary is the control people use to decide whether to open it, so it should describe the benefit of opening the section.

Good summaries:

• How to find your reference number
• What happens after you submit
• Why we need this information

Weak summaries:

• More information
• Click here
• Help

Do not put a requirement, deadline or instruction needed to submit the page only inside an expandable section. Some people will not open it.

Use panels responsibly

Panels can use custom background and text colours. Before changing colours, check that text remains readable at normal zoom and high contrast settings, and make sure the wording still communicates the purpose without depending on colour. A panel with unclear purpose is harder to scan than ordinary content.

Use a panel for a small, self-contained outcome. For a longer explanation, use standard content and headings instead.

Show information only when it is relevant

Information components can use advanced component visibility controls. They are useful for specialised cases, but simpler journey patterns are normally easier to understand:

• Use a choice reveal for a small same-page explanation that follows a selected option.
• Use a page flow condition when an entire step is only relevant to some people.
• Use component visibility only when those patterns cannot meet the need.

If you use component visibility, test changes while a person is still on the page, as well as a fresh journey and a resumed draft. Make sure hidden information is not the only place that explains an essential action.

Final checks

• The information is placed next to the decision it supports.
• The chosen format reflects importance rather than decoration.
• Links have meaningful text and open to the correct destination.
• Dynamic content behaves properly with missing and long values.
• Important instructions remain visible without opening optional content.
• Panels remain readable without relying on colour alone.
• Any conditional display has been tested in both states.

Related guidance

• Shared component settings
• Write Liquid templates
• Use Markdown and HTML
• Design accessible services