Setting the page heading

In Power Pages, it is essential to apply consistent headings for better user experience and accessibility. The way the heading is presented depends on the page type: whether it is a single question page or a multiple question page.

Single question page

For single question pages, the page heading should be included as part of the question's <legend> or <label> element in the form. The default title block in the extended template should be replaced with a blank block, effectively canceling the default title behavior. This ensures the question's title (which comes from the content page's title) is used within the form itself.

Here's an example of how the page title is used in the question's <legend> on a single question page:



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

{% block title %}{% endblock %}

{% block main %}
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
        <h1 class="govuk-fieldset__heading">
          {{ page.title }}
        </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 %}

Multiple question page

For multiple question pages, you can omit the {% block title %} block in the extended template. In this case, the page will inherit the default page title from the content page, which is set in the "Title" field in the Power Pages configuration.



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

## Default page heading will display here instead (e.g. 'Personal information')
 
{% 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 %}

Why this difference?

Single question pages need a custom structure for the heading as part of the form itself, while multiple question pages can use the default inherited title. This ensures that both types of pages follow accessible design principles while maintaining consistency across the service.

Both options should inherit the page title from the content page web, where you can set the title of the webpage. This is accessed in Liquid as {{ page.title }}.

How to access and edit Web Page Content in Dynamics 365

To access and modify the content page settings, such as the page title, follow these steps:

Go to the Portal Management model-driven app in the app launcher.
Look for the Web Pages option in the left-hand navigation. This contains all the pages for your website. Use the search bar or filter options to quickly find the page you're working on.
Click on the desired Web Page record and locate the child Web Page Content record.
Click the link to open the Web Page Content record and locate the Title field. This is where you can edit the page's title.
After making your changes, click Save to update the page.

Best practices

For single question pages, use the <legend> or <label> element to present the question with its title.
For multiple question pages, let the page title automatically inherit from the content page's metadata.
Remember to use the appropriate component structure and classes associated with single question and multiple question pages. The components area of this design manual provides examples for each use case.