HMRC banner

The HMRC banner 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.
  • for HMRC internal services – use the Internal header

How it works

You need HMRC Frontend to use this pattern – find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro into your code.

The HMRC banner 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
                <div class="hmrc-banner">
  <div class="hmrc-organisation-logo">
    <p class="govuk-body-s"> HM Revenue &amp; Customs
    </p>
  </div>
</div>
              
                  <div class="hmrc-banner">
  <div class="hmrc-organisation-logo">
    <p class="govuk-body-s"> Cyllid a Thollau EM
    </p>
  </div>
</div>
                
                  {% from "hmrc/components/banner/macro.njk" import hmrcBanner %}

{{ hmrcBanner({
    
}) }}
                
                    {% from "hmrc/components/banner/macro.njk" import hmrcBanner %}

{{ hmrcBanner({
      language: 'cy'
}) }}
                  

Research

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

Discuss the HMRC banner on GitHub