Universal Credit Agent header

The agent header appears at the top of every page in the agent view of the Universal Credit service.

Open this agent header example in a new tab
Joe Bloggs: Sign out 
<header class="uc-agent-header uc-agent-header--sticky  uc-agent-header--sticky" data-module="govuk-header">
<div class="uc-agent-header__container govuk-width-container">
<div class="uc-agent-header__logo">
  <a href="#" class="uc-agent-header__link uc-agent-header__link--homepage">
    <span class="uc-agent-header__crown-logo"><svg
        aria-hidden="true"
        class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown--large-navbar"
        height="30"
        width="32"
        focusable="false"
        viewBox="0 0 32 30"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8" fill="currentColor" fill-rule="evenodd" />
      </svg></span>
    <span class="uc-agent-header__service-name">
      Universal Credit
    </span>
  </a>
</div>
<div class="uc-agent-header__content">
  <button type="button" class="uc-agent-header__menu-button govuk-js-header-toggle" aria-controls="uc-agent-header__navigation__wrapper" hidden>
    Menu
  </button>
  <div id="uc-agent-header__navigation__wrapper" class="uc-agent-header__navigation__wrapper">
    <nav aria-label="Menu" class="uc-agent-header__navigation">
      <ul id="navigation" class="uc-agent-header__navigation-list">
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#">
            To-do list
          </a>
        </li>
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#">
            Claimants
          </a>
        </li>
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#">
            Colleagues
          </a>
        </li>
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#">
            Teams
          </a>
        </li>
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#" rel="noopener noreferrer">
            Telephone ID check
          </a>
        </li>
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#" target=_blank rel="noopener noreferrer">
            Diary
            <span class="govuk-visually-hidden">(opens in a new tab)</span>
          </a>
        </li>
      </ul>
    </nav>
    <div class="uc-agent-header__profile">
      <span id="current-user">Joe Bloggs</span>:
      <a class="uc-agent-header__link uc-agent-header__profile-link" href="/sign-out" aria-describedby="current-user">Sign out</a>
    </div>
  </div>
</div>
</div>
</header>
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
homepageUrl string The URL of the homepage. Defaults to `"/"`.
serviceName string The name of your service, included in the header.
serviceUrl string URL for the service name anchor.
disableStickyHeader boolean Removes the class to make the header sticky.
navigation array Can be used to add navigation to the header component., see navigation
navigationClasses string Classes for the navigation section of the header.
navigationLabel string Text for the `aria-label` attribute of the navigation. Defaults to the same value as `menuButtonText`.
menuButtonLabel string Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu.
menuButtonText string Text of the button that opens the mobile navigation menu, if there is a mobile navigation menu. There is no enforced character limit, but there is a limited display space so keep text as short as possible. By default, this is set to 'Menu'.
containerClasses string Classes for the container, useful if you want to make the header fixed width.
classes string Classes to add to the header HTML element.
attributes object HTML attributes (for example data attributes) to add to the header HTML element.
action string the action of a link
actionUrl string The action url
profileName string The name of the person signed-in.

Options for navigation array object

Name Type Description
text string Required. Text for the navigation item. If `html` is provided, the `text` option will be ignored.
html string Required. HTML for the navigation item. If `html` is provided, the `text` option will be ignored.
href string URL of the navigation item anchor.
active boolean Flag to mark the navigation item as active or not.
attributes object HTML attributes (for example data attributes) to add to the navigation item anchor.
opensInNewWindow boolean To determine whether or not a link opens in a new window. 
{% from "uc/agent-header/macro.njk" import ucAgentHeader %}

{{
ucAgentHeader({
    "serviceName": "Universal Credit",
    "serviceUrl": "#",
    "classes": 'uc-agent-header--sticky',
    "navigation": [
    {
        "href": "#",
        "text": "To-do list"
    },
    {
        "href": '#',
        "text": "Claimants"
    },
    {
        "href": '#',
        "text": "Colleagues"
    },
    {
        "href": '#',
        "text": "Teams"
    },
    {
        "href": '#',
        "text": "Telephone ID check",
        "attributes": {
            "rel": "noopener noreferrer"
        }
    },
    {
        "href": '#',
        "text": "Diary",
        "opensInNewWindow": true,
        "attributes": {
            "rel": "noopener noreferrer"
        }
    }
    ],
    "action": "Sign out",
    "actionUrl": "/sign-out",
    "profileName": "Joe Bloggs"
})
}}

When to use this component

Use the agent header on pages that appear in the agent view of Universal Credit.

When not to use this component

Do not use the agent header when the user is signed in as a claimant. Use the claimant header instead.

Do not use it outside the Universal Credit service. Use the GOV.UK header or DWP internal service header instead.

How it works

To use the agent header in your prototype, first install the GOV.UK Prototype Kit and DWP Frontend.

When a user is signed in, the agent header consists of:

  • the GOV.UK crown logo
  • the Universal Credit service name, which links to the Universal Credit agent dashboard
  • navigation and action links for agents
  • the name of the person logged in
  • a “Sign out” link which signs the agent out of the service

The agent header includes the following navigation links, in this order. In some circumstances and for some users not all links will be shown.

  • To-do list
  • Claimants
  • Colleagues
  • Teams
  • Telephone ID check
  • Diary

The header is “sticky” and stays in place at the top of the screen as the user scrolls.

Open this agent header - logged out example in a new tab
Joe Bloggs: Sign out 
<header class="uc-agent-header uc-agent-header--sticky  uc-agent-header--sticky" data-module="govuk-header">
<div class="uc-agent-header__container govuk-width-container">
<div class="uc-agent-header__logo">
  <a href="#" class="uc-agent-header__link uc-agent-header__link--homepage">
    <span class="uc-agent-header__crown-logo"><svg
        aria-hidden="true"
        class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown--large-navbar"
        height="30"
        width="32"
        focusable="false"
        viewBox="0 0 32 30"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8" fill="currentColor" fill-rule="evenodd" />
      </svg></span>
    <span class="uc-agent-header__service-name">
      Universal Credit
    </span>
  </a>
</div>
<div class="uc-agent-header__content">
  <button type="button" class="uc-agent-header__menu-button govuk-js-header-toggle" aria-controls="uc-agent-header__navigation__wrapper" hidden>
    Menu
  </button>
  <div id="uc-agent-header__navigation__wrapper" class="uc-agent-header__navigation__wrapper">
    <nav aria-label="Menu" class="uc-agent-header__navigation">
      <ul id="navigation" class="uc-agent-header__navigation-list">
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#">
            To-do list
          </a>
        </li>
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#">
            Claimants
          </a>
        </li>
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#">
            Colleagues
          </a>
        </li>
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#">
            Teams
          </a>
        </li>
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#" rel="noopener noreferrer">
            Telephone ID check
          </a>
        </li>
        <li class="uc-agent-header__navigation-item">
          <a class="uc-agent-header__link" href="#" target=_blank rel="noopener noreferrer">
            Diary
            <span class="govuk-visually-hidden">(opens in a new tab)</span>
          </a>
        </li>
      </ul>
    </nav>
    <div class="uc-agent-header__profile">
      <span id="current-user">Joe Bloggs</span>:
      <a class="uc-agent-header__link uc-agent-header__profile-link" href="/sign-out" aria-describedby="current-user">Sign out</a>
    </div>
  </div>
</div>
</div>
</header>
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
homepageUrl string The URL of the homepage. Defaults to `"/"`.
serviceName string The name of your service, included in the header.
serviceUrl string URL for the service name anchor.
disableStickyHeader boolean Removes the class to make the header sticky.
navigation array Can be used to add navigation to the header component., see navigation
navigationClasses string Classes for the navigation section of the header.
navigationLabel string Text for the `aria-label` attribute of the navigation. Defaults to the same value as `menuButtonText`.
menuButtonLabel string Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu.
menuButtonText string Text of the button that opens the mobile navigation menu, if there is a mobile navigation menu. There is no enforced character limit, but there is a limited display space so keep text as short as possible. By default, this is set to 'Menu'.
containerClasses string Classes for the container, useful if you want to make the header fixed width.
classes string Classes to add to the header HTML element.
attributes object HTML attributes (for example data attributes) to add to the header HTML element.
action string the action of a link
actionUrl string The action url
profileName string The name of the person signed-in.

Options for navigation array object

Name Type Description
text string Required. Text for the navigation item. If `html` is provided, the `text` option will be ignored.
html string Required. HTML for the navigation item. If `html` is provided, the `text` option will be ignored.
href string URL of the navigation item anchor.
active boolean Flag to mark the navigation item as active or not.
attributes object HTML attributes (for example data attributes) to add to the navigation item anchor.
opensInNewWindow boolean To determine whether or not a link opens in a new window. 
{% from "uc/agent-header/macro.njk" import ucAgentHeader %}

{{
ucAgentHeader({
    "serviceName": "Universal Credit",
    "serviceUrl": "#",
    "classes": 'uc-agent-header--sticky',
    "navigation": [
    {
        "href": "#",
        "text": "To-do list"
    },
    {
        "href": '#',
        "text": "Claimants"
    },
    {
        "href": '#',
        "text": "Colleagues"
    },
    {
        "href": '#',
        "text": "Teams"
    },
    {
        "href": '#',
        "text": "Telephone ID check",
        "attributes": {
            "rel": "noopener noreferrer"
        }
    },
    {
        "href": '#',
        "text": "Diary",
        "opensInNewWindow": true,
        "attributes": {
            "rel": "noopener noreferrer"
        }
    }
    ],
    "action": "Sign out",
    "actionUrl": "/sign-out",
    "profileName": "Joe Bloggs"
})
}}

Signed out users

When the user is signed out, use the signed-out version of the component. This resembles the GOV.UK service header.

Open this claimant header with no logout example in a new tab
Universal Credit 
<header class="uc-claimant-header">
<div class="uc-claimant-header__container uc-width-container">
<div class="uc-claimant-header__logo">
  <a href="https://www.gov.uk/" class="uc-claimant-header__link uc-claimant-header__link--homepage">
    <svg focusable="false" role="img" class="govuk-header__logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 30" height="30" width="148" aria-label="GOV.UK">
      <title>
        GOV.UK
      </title>
      <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
    </svg></a>
</div>
<div class="uc-claimant-header__content">
  <div class="uc-claimant-header__service-name">
    <a href="#" class="uc-claimant-header__link">Universal Credit</a>
  </div>
</div>
</div>
</header>
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 service name, this replaces the name value
serviceUrl string Required. The service url
action string the action of a link
actionUrl string The action url
profileName string The name of the person signed-in.
classes string Additional classes to add to the claimant header
attributes object HTML Attributes (data attributes) to add to the claimant header 
{% from "uc/claimant-header/macro.njk" import ucClaimantHeader %}

{{ ucClaimantHeader({
"serviceName": "Universal Credit",
"serviceUrl": "#"
}) }}

Smaller screen sizes

As the viewport becomes narrower, text elements wrap on to a second line. At tablet and mobile screen widths (below 640 pixels) the service name moves below the GOV.UK brand and font sizes are reduced.

Technical guidance

The Diary and Telephone ID check links open in new tabs.

Accessibility

To avoid failing WCAG success criterion 2.4.11 Focus Not Obscured (Minimum), you must make sure that the sticky header does not hide focused elements when tabbing through a page. The WCAG 2.2 guidance has a demo page illustrating this problem with sticky headers.

For more about building accessible services see the DWP Accessibility Manual.

Contribute

If you have used or researched this component, please use the email address below to let us know what you found so we can make it better for everyone.

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk