1. Static Component Guide
  2. Page title

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.

How to call this component

<%= render "govuk_component/title" {
  title: "My page title"
} %>

How it looks

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

Other examples (preview all)

With context (preview)

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

Publication

My page title

Long title with context (preview)

<%= render "govuk_component/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"
} %>

Publication

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

In html publication (preview)

Page titles are used in HTML Publications (see example)

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

Publication

HTML publication page title