Using captions in page headings

You may need to include the 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 will set the page title in the web page content page as usual, but the title will include the caption, separated by a colon (:). For example:

About you: What is your first name?

In the Liquid template, you will split the page title into the main title and the caption using the Liquid split filter. The first part will be the caption, and the second part will be the main title. You can then format them appropriately in HTML as follows:

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, the {{ 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 in 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 is used to override the default page title, which is split into the caption and the main title. The caption is displayed above the main title, which can help clarify that the page is part of a larger section or group.