1. Component Guide
  2. Heading
  3. Different font sizes
Heading example

Different font sizes

Set a different font size for the heading. Uses the GOV.UK Frontend heading sizes but defaults to 27px for legacy reasons. Valid options are xl, l, m and s.

This option is not tied to the heading_level option in order to give flexibility.

How it looks (preview)

One big heading

How to call this example

<%= render "govuk_publishing_components/components/heading", {
  text: "One big heading",
  font_size: "xl"
} %>