HMRC header

The HMRC header shows external users that they are dealing with HMRC.

When to use

Use this pattern if the user needs to know they are dealing with HMRC. For example, if they need to be sure that a payment is going to the right government department.

When not to use

Do not use this pattern when the user does not need to know they are dealing with HMRC. Use the GOV.UK header.

Do not use this pattern for:

How it works

The HMRC header should sit below the GOV.UK header and the phase banner, and above the Welsh language toggle.

It should have:

  • the HMRC logo
  • a vertical teal bar on the left side
  • a horizontal grey bar on the bottom
  <div class="hmrc-banner" role="banner">
    <div class="organisation-logo">
      <p>HM Revenue &amp; Customs</p>
    </div>
  </div>

Research

We need more research. If you have used the HMRC header, get in touch to share your research findings.

Discuss the HMRC header on GitHub

Help and support

Contact the Service Design Tools team in #team-sdt on HMRC Slack (open in app) or email us.