Internal service header
The internal service header shows users what service or system they are using.
<main>
<header class="dwp-header">
<div class="dwp-header__content govuk-width-container">
<div class="dwp-header__service-name">
<a href="#" class="dwp-header__link">Service name1</a>
</div>
</div>
</header>
</main>
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 |
serviceHref | string | Required.The service url |
action | string | the action of a button |
actionHref | string | The action url |
container | boolean | Whether to use the govuk width container |
classes | string | Additional classes to add to the internal service header |
containerClasses | string | Additional classes to add to the govuk width container |
attributes | object | HTML Attributes (data attributes) to add to the internal service header |
{% from "internal-service-header/macro.njk" import dwpHeader %}
<main>
{{
dwpHeader({
serviceName: "Service name1",
serviceHref: '#',
container:true
})
}}
</main>
When to use this component
Use this header for any service or system not on GOV.UK, such as internal and agent-facing services.
When not to use this component
If the service is hosted on a service.gov.uk domain it should use the GOV.UK Design System Header component.
How it works
The name of the service should be left-aligned in the header.
If your users can sign in or out of a service you should include a link for them to do this on the right-hand side of the header.
<main>
<header class="dwp-header">
<div class="dwp-header__content govuk-width-container">
<div class="dwp-header__service-name dwp-header__service-name--with-action">
<a href="#" class="dwp-header__link">Service name</a>
</div>
<div class="dwp-header__service-action">
<a href="#" class="dwp-header__link">Sign out</a>
</div>
</div>
</header>
</main>
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 |
serviceHref | string | Required.The service url |
action | string | the action of a button |
actionHref | string | The action url |
container | boolean | Whether to use the govuk width container |
classes | string | Additional classes to add to the internal service header |
containerClasses | string | Additional classes to add to the govuk width container |
attributes | object | HTML Attributes (data attributes) to add to the internal service header |
{% from "internal-service-header/macro.njk" import dwpHeader %}
<main>
{{
dwpHeader({
serviceName: "Service name",
serviceHref: "#",
action: "Sign out",
actionHref: "#",
container:true
})
}}
</main>
Research
This component has been used on services across DWP, including
- Move to Universal Credit
- Apply for New Style Jobseeker’s Allowance
The internal service header has only been researched on agent-facing services. More research is needed on the component.
Have you used this component?
Please let us know what you found so we can make it better for everyone. There is an open discussion for this component on GitHub where you can share anything you think might be useful.
Discuss Internal service header on GitHub
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