Component

Page title

A page title with optional context label

This contains an optional parameter for average title length. The two valid values for this parameter are ‘medium’ or ‘long’. Medium titles are titles where the average is around 30 characters or less. Long titles would have an average length of nearer 50 characters or more.

On average the titles on government bits of content are 50 characters. The average for bits of general guidance are nearer 27 characters long.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

My page title

How to call this component

<%= render "govuk_publishing_components/components/title", {
  title: "My page title"
} %>

Accessibility acceptance criteria

The page title must:

  • be part of a correct heading structure for a page
  • be semantically represented as a heading
  • convey the heading level

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

With context (preview)

Publication

My page title 

<%= render "govuk_publishing_components/components/title", {
  context: "Publication",
  title: "My page title"
} %>

With context inside (preview)

If the context should be considered part of the page heading, you can nest the context within the <h1>.

Publication My page title 

<%= render "govuk_publishing_components/components/title", {
  context: "Publication",
  title: "My page title",
  context_inside: true
} %>

With context language labelled (preview)

Sometimes this component appears on a page that has been translated. The title will naturally be supplied in the required language but the context string may fall back to the default. In these instances we need to label the language so the page remains semantic and screenreaders can handle the switch.

The lang attribute must be set to a valid BCP47 string. A valid code can be the two or three letter language code - for example, English is en or eng, Korean is ko or kor - but if in doubt please check.

Publication

My page title 

<%= render "govuk_publishing_components/components/title", {
  context: "Publication",
  context_locale: "en",
  title: "My page title"
} %>

Long title with context (preview)

Publication

My page title which is often really long and verbose and has lots of extra words it doesn't need 

<%= render "govuk_publishing_components/components/title", {
  context: "Publication",
  title: "My page title which is often really long and verbose and has lots of extra words it doesn't need",
  average_title_length: "long"
} %>

With margin bottom (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having a margin bottom of 50px.

This margin is responsive at certain sizes, see the link above for more detail. Note also that the component has a (responsive) top margin set as well, which cannot be modified.

Margin bottom of 10px 

<%= render "govuk_publishing_components/components/title", {
  title: "Margin bottom of 10px",
  margin_bottom: 2
} %>

In html publication (preview)

Page titles are used in HTML Publications (see example)

Publication

HTML publication page title 

<%= render "govuk_publishing_components/components/title", {
  context: "Publication",
  title: "HTML publication page title",
  inverse: true,
  margin_bottom: 0
} %>

Using design system template (preview)

This option allows the removal of top margin from the component so that it works within a Design System page template, where spacing above the title is already provided by padding on the wrapping div.

My page title 

<main class="govuk-main-wrapper">
  <%= render "govuk_publishing_components/components/title", {
  title: "My page title",
  margin_top: 0
} %>
</main>