Using captions in page headings

You may need to include a caption above the page heading to indicate that the page is part of a larger section or group.

To apply consistent page headings with captions across Power Pages, you should first understand the guidance on setting page headings.

The main difference when including captions is that you set the page title in the Web Page Content record with the caption and title separated by a colon. For example:

About you: What is your first name?

In the Liquid template, you split the page title into caption and main title using the Liquid split filter. The first part becomes the caption, and the second part becomes the main title.

Single question page

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}
  {% assign title = page.title | split: ":" %}
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
        <h1 class="govuk-fieldset__heading">
          <span class="govuk-caption-l">{{ title[0] }}</span>
          {{ title[1] }}
        </h1>
      </legend>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="schema-name" name="schema-name" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="schema-name">Yes</label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="schema-name-2" name="schema-name" type="radio" value="no">
          <label class="govuk-label govuk-radios__label" for="schema-name-2">No</label>
        </div>
      </div>
    </fieldset>
  </div>
{% endblock %}

In this example, {{ title[0] }} is the caption (before the colon) and {{ title[1] }} is the main title (after the colon).

Multiple question page

The guidance for captions differs slightly from setting a standard page heading on a multiple question page. When using captions you should include the title block and override its content as shown below:

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}
  {% assign title = page.title | split: ":" %}
  <h1 class="govuk-heading-l">
    <span class="govuk-caption-l">{{ title[0] }}</span>
    {{ title[1] }}
  </h1>
{% endblock %}
 
{% block main %}
  <div class="govuk-form-group">
    <label class="govuk-label" for="schema-name">
      What is your first name?
    </label>
    <input class="govuk-input" id="schema-name" name="schema-name" type="text">
  </div>

  <div class="govuk-form-group">
    <label class="govuk-label" for="schema-name">
      What is your last name?
    </label>
    <input class="govuk-input" id="schema-name" name="schema-name" type="text">
  </div>
{% endblock %}

In this example, the title block overrides the default page title, splitting it into the caption and main title. The caption is displayed above the main title, helping to clarify that the page is part of a larger section or group.