Skip to main content

Work in progress

This page is a design preview. It may not contain the latest guidance and may not behave as expected.

Current guidance can always be found at design-system.dwp.gov.uk.

Cookies on the DWP Design System website

We use some essential cookies to make this service work.

We’d also like to use analytics cookies so we can understand how you use the service and make improvements.

View cookies
Components
Internal service header

History

DWP Frontend v2.6.0

23 February 2024

What

This release:

  • Refactors macro and header CSS
  • Deprecates Name in favour of serviceName value

DWP Frontend v2.5.0

20 December 2023

What

This release:

  • Switches from using govuk-header__link--service-name in the header component (class removed as of GOV.UK Frontend 5.0.0)

DWP Frontend v2.4.0

23 February 2023

What

This release:

  • Changes the max-width property of the key details bar and header components to be set with a Sass variable instead of a dedicated class selector
  • Fixes a padding issue in the key details bar component

Why

Max-width property

The HAS Workflow applications are moving to use a wider (1100px) .govuk-width-container and services that use the internal services header need to override the CSS for the .dwp-key-details-bar__key-details class so as to align with the rest of the page.

The change means the max-width property is set with a Sass variable (e.g. $dwp-key-details-max-width: 1100px) rather than needing a dedicated class selector.

How to implement

To update the component you will need to either update your dwp-frontend npm package or copy the updated code example from the Design System website.

To update the npm package:

  • Find out the latest version of dwp-frontend on npm: @dwp/dwp-frontend
  • Edit the version number in your project’s package.json to match the latest version
  • Run npm i @dwp/frontend

DWP Frontend v2.3.6

24 October 2022

What

This release fixes the service name alignment issue so it sits inline with the rest of the content.

Why

The service name in the internal service header was out of alignment with the rest of the content. We have removed extra padding to correct this.

How to implement

To update the component you will need to either update your dwp-frontend npm package or copy the updated code example from the Design System website.

To update the npm package:

  • Find out the latest version of dwp-frontend on npm: @dwp/dwp-frontend
  • Edit the version number in your project’s package.json to match the latest version
  • Run npm i @dwp/frontend

Get support

Need help implementing this in a prototype or production build? Get support from the Design System team.

Give feedback

We depend on insights from real projects to update and improve the design system. If you use something we made, tell us how it went.

Could we improve this page?

Send questions, comments or suggestions to the DWP Design System team.

Last updated: