1. Government Frontend Component Guide
  2. Heading

Component

Heading

A text heading

A versatile heading tag component, including options for different heading levels and font sizes.

This is a h2 by default.

Real world examples:

Search for usage of this component on GitHub

How it looks (preview all)

Download the full outcome

How to call this component

<%= render "govuk_publishing_components/components/heading", {
  text: "Download the full outcome"
} %>

Accessibility acceptance criteria

The heading must:

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

Other examples

Specific heading level (preview)

Original consultation

<%= render "govuk_publishing_components/components/heading", {
  text: "Original consultation",
  heading_level: 3
} %>

Different font sizes (preview)

Choose a different font size. Valid options are 24 (24px) and 19 (19px), with the component defaulting to 27px, appropriate for a H1. This option is not tied to the heading_level option in order to give flexibility.

Heading 3

<%= render "govuk_publishing_components/components/heading", {
  text: "Heading 3",
  font_size: 19
} %>

With id attribute (preview)

Detail of outcome

<%= render "govuk_publishing_components/components/heading", {
  text: "Detail of outcome",
  id: "detail_of_outcome"
} %>

Right to left (preview)

مستندات

<%= render "govuk_publishing_components/components/heading", {
  text: "مستندات"
} %>

With padding (preview)

Padded

<%= render "govuk_publishing_components/components/heading", {
  text: "Padded",
  padding: true
} %>

With margin (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 no margin bottom.

Really big bottom margin

<%= render "govuk_publishing_components/components/heading", {
  text: "Really big bottom margin",
  margin_bottom: 9
} %>

With mobile top margin (preview)

On publications and consultations the layout of the page requires that the heading component have spacing above it on mobile. Since this is a specific use case, this is now an option on the component rather than the default behaviour.

It is intended that this option will ultimately be deprecated once more of the frontend is componentised and a general component model of margins is implemented.

Consultation description

<%= render "govuk_publishing_components/components/heading", {
  text: "Consultation description",
  mobile_top_margin: true
} %>

With border (preview)

A top border can be applied to the component of different thicknesses. Accepted values are 1 (1px), 2 (2px) and 5 (5px). Note that this works best with padding applied.

With a border

<%= render "govuk_publishing_components/components/heading", {
  text: "With a border",
  padding: true,
  border_top: 2
} %>

With branding (preview)

Organisation colour branding can be added to the component as shown, if a top border is included.

Branding

<%= render "govuk_publishing_components/components/heading", {
  text: "Branding",
  brand: "department-for-environment-food-rural-affairs",
  padding: true,
  border_top: 5
} %>

With lang attribute (preview)

The component is used on translated pages that don’t have a translation for the text strings. This means that it could display the fallback English string if the translate method can’t find an appropriate translation. This makes sure that the lang can be set to ensure that browsers understand which parts of the page are in each language.

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.

Ein gweinidogion

<%= render "govuk_publishing_components/components/heading", {
  text: "Ein gweinidogion",
  lang: "cy"
} %>