Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Heading

These examples are used for automated tests and may not follow service manual best practice.

Heading default

Open this example in a new tab: Heading default

What is your full name?

Code

Markup

<h1 class="nhsuk-heading-l">
  What is your full name?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your full name?",
  size: "l"
}) }}

Heading size class

Open this example in a new tab: Heading size class

What is your full name?

Code

Markup

<h1 class="nhsuk-heading nhsuk-heading-l">
  What is your full name?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your full name?",
  classes: "nhsuk-heading-l"
}) }}

Heading size class overriding size param

Open this example in a new tab: Heading size class overriding size param

What is your full name?

Code

Markup

<h1 class="nhsuk-heading nhsuk-heading-l">
  What is your full name?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your full name?",
  classes: "nhsuk-heading-l",
  size: "s"
}) }}

Heading with size S text

Open this example in a new tab: Heading with size S text

What is your full name?

Code

Markup

<h1 class="nhsuk-heading-s">
  What is your full name?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your full name?",
  size: "s"
}) }}

Heading with size M text

Open this example in a new tab: Heading with size M text

What is your full name?

Code

Markup

<h1 class="nhsuk-heading-m">
  What is your full name?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your full name?",
  size: "m"
}) }}

Heading with size L text

Open this example in a new tab: Heading with size L text

What is your full name?

Code

Markup

<h1 class="nhsuk-heading-l">
  What is your full name?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your full name?",
  size: "l"
}) }}

Heading with size XL text

Open this example in a new tab: Heading with size XL text

What is your full name?

Code

Markup

<h1 class="nhsuk-heading-xl">
  What is your full name?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your full name?",
  size: "xl"
}) }}

Heading with size S text and caption

Open this example in a new tab: Heading with size S text and caption

About you What is your home address?

Code

Markup

<h1 class="nhsuk-heading-s">
  <span class="nhsuk-caption">
    About you
  </span>
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: "About you",
  size: "s"
}) }}

Heading with size M text and caption

Open this example in a new tab: Heading with size M text and caption

About you What is your home address?

Code

Markup

<h1 class="nhsuk-heading-m">
  <span class="nhsuk-caption-m">
    About you
  </span>
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: "About you",
  size: "m"
}) }}

Heading with size L text and caption

Open this example in a new tab: Heading with size L text and caption

About you What is your home address?

Code

Markup

<h1 class="nhsuk-heading-l">
  <span class="nhsuk-caption-l">
    About you
  </span>
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: "About you",
  size: "l"
}) }}

Heading with size XL text and caption

Open this example in a new tab: Heading with size XL text and caption

About you What is your home address?

Code

Markup

<h1 class="nhsuk-heading-xl">
  <span class="nhsuk-caption-xl">
    About you
  </span>
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: "About you",
  size: "xl"
}) }}

Heading with size S text and caption "after"

Open this example in a new tab: Heading with size S text and caption "after"

What is your home address?

About you
Code

Markup

<h1 class="nhsuk-heading-s">
  What is your home address?
</h1>
<span class="nhsuk-caption nhsuk-caption--bottom">
  About you
</span>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "after"
  },
  size: "s"
}) }}

Heading with size M text and caption "after"

Open this example in a new tab: Heading with size M text and caption "after"

What is your home address?

About you
Code

Markup

<h1 class="nhsuk-heading-m">
  What is your home address?
</h1>
<span class="nhsuk-caption-m nhsuk-caption--bottom">
  About you
</span>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "after"
  },
  size: "m"
}) }}

Heading with size L text and caption "after"

Open this example in a new tab: Heading with size L text and caption "after"

What is your home address?

About you
Code

Markup

<h1 class="nhsuk-heading-l">
  What is your home address?
</h1>
<span class="nhsuk-caption-l nhsuk-caption--bottom">
  About you
</span>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "after"
  },
  size: "l"
}) }}

Heading with size XL text and caption "after"

Open this example in a new tab: Heading with size XL text and caption "after"

What is your home address?

About you
Code

Markup

<h1 class="nhsuk-heading-xl">
  What is your home address?
</h1>
<span class="nhsuk-caption-xl nhsuk-caption--bottom">
  About you
</span>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "after"
  },
  size: "xl"
}) }}

Heading text and caption "after" as a paragraph

Open this example in a new tab: Heading text and caption "after" as a paragraph

What is your home address?

About you

Code

Markup

<h1 class="nhsuk-heading-l">
  What is your home address?
</h1>
<p class="nhsuk-caption-l nhsuk-caption--bottom">
  About you
</p>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "after",
    element: "p"
  },
  size: "l"
}) }}

Heading with size S text and caption "before"

Open this example in a new tab: Heading with size S text and caption "before"

About you

What is your home address?

Code

Markup

<span class="nhsuk-caption">
  About you
</span>
<h1 class="nhsuk-heading-s">
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "before"
  },
  size: "s"
}) }}

Heading with size M text and caption "before"

Open this example in a new tab: Heading with size M text and caption "before"

About you

What is your home address?

Code

Markup

<span class="nhsuk-caption-m">
  About you
</span>
<h1 class="nhsuk-heading-m">
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "before"
  },
  size: "m"
}) }}

Heading with size L text and caption "before"

Open this example in a new tab: Heading with size L text and caption "before"

About you

What is your home address?

Code

Markup

<span class="nhsuk-caption-l">
  About you
</span>
<h1 class="nhsuk-heading-l">
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "before"
  },
  size: "l"
}) }}

Heading with size XL text and caption "before"

Open this example in a new tab: Heading with size XL text and caption "before"

About you

What is your home address?

Code

Markup

<span class="nhsuk-caption-xl">
  About you
</span>
<h1 class="nhsuk-heading-xl">
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "before"
  },
  size: "xl"
}) }}

Heading text and caption "before" as a heading

Open this example in a new tab: Heading text and caption "before" as a heading

About you

What is your home address?

Code

Markup

<h2 class="nhsuk-caption-l">
  About you
</h2>
<h1 class="nhsuk-heading-l">
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "before",
    element: "h2"
  },
  size: "l"
}) }}

Heading with size S text and caption "end"

Open this example in a new tab: Heading with size S text and caption "end"

What is your home address? About you

Code

Markup

<h1 class="nhsuk-heading-s">
  What is your home address?
  <span class="nhsuk-caption nhsuk-caption--bottom">
    About you
  </span>
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "end"
  },
  size: "s"
}) }}

Heading with size M text and caption "end"

Open this example in a new tab: Heading with size M text and caption "end"

What is your home address? About you

Code

Markup

<h1 class="nhsuk-heading-m">
  What is your home address?
  <span class="nhsuk-caption-m nhsuk-caption--bottom">
    About you
  </span>
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "end"
  },
  size: "m"
}) }}

Heading with size L text and caption "end"

Open this example in a new tab: Heading with size L text and caption "end"

What is your home address? About you

Code

Markup

<h1 class="nhsuk-heading-l">
  What is your home address?
  <span class="nhsuk-caption-l nhsuk-caption--bottom">
    About you
  </span>
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "end"
  },
  size: "l"
}) }}

Heading with size XL text and caption "end"

Open this example in a new tab: Heading with size XL text and caption "end"

What is your home address? About you

Code

Markup

<h1 class="nhsuk-heading-xl">
  What is your home address?
  <span class="nhsuk-caption-xl nhsuk-caption--bottom">
    About you
  </span>
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "end"
  },
  size: "xl"
}) }}

Heading with size S text and caption "start"

Open this example in a new tab: Heading with size S text and caption "start"

About you What is your home address?

Code

Markup

<h1 class="nhsuk-heading-s">
  <span class="nhsuk-caption">
    About you
  </span>
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "start"
  },
  size: "s"
}) }}

Heading with size M text and caption "start"

Open this example in a new tab: Heading with size M text and caption "start"

About you What is your home address?

Code

Markup

<h1 class="nhsuk-heading-m">
  <span class="nhsuk-caption-m">
    About you
  </span>
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "start"
  },
  size: "m"
}) }}

Heading with size L text and caption "start"

Open this example in a new tab: Heading with size L text and caption "start"

About you What is your home address?

Code

Markup

<h1 class="nhsuk-heading-l">
  <span class="nhsuk-caption-l">
    About you
  </span>
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "start"
  },
  size: "l"
}) }}

Heading with size XL text and caption "start"

Open this example in a new tab: Heading with size XL text and caption "start"

About you What is your home address?

Code

Markup

<h1 class="nhsuk-heading-xl">
  <span class="nhsuk-caption-xl">
    About you
  </span>
  What is your home address?
</h1>

Macro

{% from "heading/macro.njk" import heading -%}

{{ heading({
  text: "What is your home address?",
  caption: {
    text: "About you",
    placement: "start"
  },
  size: "xl"
}) }}