Components

Header

The header shows users:

• that they are using a Government service or product
• which domain they are on, GOV.UK, a Land Registry external service, or a staff system
• which service or product they are using

If you use the page template, you’ll also get the header without having to add it, as it’s included by default.

The Land Registry header is complementary to the GOV.UK header so that users are reassured they are working with a Government department, and can use the familiar conventions they have learnt from interacting with the UK Government.

Open this example in a new tab

HTML

<header class="govuk-header govuk-header--hmlr " role="banner" data-module="govuk-header">
  <div class="govuk-header__container govuk-width-container">
    <div class="govuk-header__content govuk-header__content--hmlr">
      <a href="#" class="govuk-header__link govuk-header__service-name">
        Service name
      </a>
    </div>
  </div>
</header>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
serviceName	string	Required. The name of your service, included in the header.
serviceUrl	string	URL for the service name anchor.
containerClasses	string	Classes for the container, useful if you want to make the header fixed width.
classes	string	Classes to add to the header container.
attributes	object	HTML attributes (for example data attributes) to add to the header container.

{% from "hmlr/components/header/macro.njk" import hmlrHeader %}
{{ hmlrHeader({
  serviceName: "Service name",
  serviceUrl: "#"
}) }}

When to use this component

GOV.UK header

You must use the GOV.UK header at the top of every page if your service is being hosted on one of these domains:

• gov.uk/myservice
• myservice.service.gov.uk
• myblog.blog.gov.uk

Land Registry header

You must use the Land Registry Government header at the top of every page if your service is being provided:

• as a public or professional user service, but is not hosted on a gov domain
• is for staff

The header can expand to the full width of the page.

Open this example in a new tab

HTML

<header class="govuk-header govuk-header--hmlr " role="banner" data-module="govuk-header">
  <div class="govuk-header__container govuk-header__container--full-width">
    <div class="govuk-header__content govuk-header__content--hmlr">
      <span class="govuk-header__service-name">
        Service name
      </span>
    </div>
  </div>
</header>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
serviceName	string	Required. The name of your service, included in the header.
serviceUrl	string	URL for the service name anchor.
containerClasses	string	Classes for the container, useful if you want to make the header fixed width.
classes	string	Classes to add to the header container.
attributes	object	HTML attributes (for example data attributes) to add to the header container.

{% from "hmlr/components/header/macro.njk" import hmlrHeader %}
{{ hmlrHeader({
  serviceName: "Service name",
  containerClasses: "govuk-header__container--full-width"
}) }}

How it works

The Land Registry header works exactly the same as the GOV.UK header, but replaces the GOV.UK specific content. The Crown, Transport font and GOV.UK border colour are replaced.

This is the first version of the Land Registry header. It’s a simpler version than the GOV.UK header.

If you need to extend its use, you should extend it in the same was as the GOV.UK header is used.

Help improve this component

If you spot a problem with this guidance you can propose a change.

If you’re not sure how to do this, read guidance on how to propose changes in GitHub.

Need help?

If you’ve got a question about the HM Land Registry Design System, contact the team.