Service heading

On this page

Preview

Service heading

import { ServiceHeading } from '@govtech-bb/react';

<ServiceHeading
  service="Redirect my business"
  description="We ask so we can check you are allowed to make this request."
>
  Tell us what position you hold in the business
</ServiceHeading>;

<div class="govbb-service-heading">
  <p class="govbb-service-heading__service">Redirect my business</p>
  <h1 class="govbb-text-h1">Tell us what position you hold in the business</h1>
  <p class="govbb-service-heading__description">
    We ask so we can check you are allowed to make this request.
  </p>
</div>

The service heading is the first thing on a form page. It tells someone which service they are in, asks the question, and — when the question needs it — says why you are asking. The service name sits behind a quiet rule so it frames the page without competing with the question.

Usage

When to use

Use it at the top of every question page in a form journey.
Use it on the pages around the journey — confirmation, check answers — so the service name stays put.

When not to use

Do not use it for a page heading outside a service, such as guidance or a landing page. Use a heading on its own.
Do not use it to hold breadcrumbs. The service name states where you are; it is not navigation.

Content

Service name — the name people saw when they started, unchanged for the whole journey. Do not restate the step (“Step 2 of 5”) or the department.
Question — the page’s h1, phrased as the question you are asking: “Tell us what position you hold in the business”, not “Position”.
Description — only when the question cannot carry it. Say why you are asking or what happens next, in a line or two. Field-level help belongs in the field’s hint instead, next to the control it explains.

The question and the field label

The question is the heading; the field keeps its own label naming the answer. On a page asking for a position, the heading asks “Tell us what position you hold in the business” and the input is labelled “Position”. Keep the label short — it names the answer, it does not repeat the question.

Accessibility

The service name is a paragraph, not a heading, so the question stays the page’s only top-level heading and the outline reads as one question per page.
Keep the question as the h1. Use as="h2" only when the block opens a section of a longer page that already has an h1.
The rule beside the service name is decorative. It carries no meaning that is not already in the text.

Single question page — the page this heading opens
Label — names the field under the question
Typography — the type scale the heading uses