Latest updates

October 2024

The Horizontal navigation component is a secondary navigation element for use in agent-facing services, along with the header navigation and side navigation components. It is included in DWP Frontend v3.1.0.

September 2024

Updated the Timeline component

We released an updated version of the Timeline component. The new version of the component is included in DWP Frontend version 3 and later: this is a breaking change and if you are using the earlier version of the timeline you will need to update your code.

The main differences are:

events can now include links and descriptions
$govuk-text-colour replaces $govuk-secondary-text-colour for improved contrast
date is now shown git first and aligned to the timeline marker
there is an end marker to show the end of the timeline (below the earliest event)

August 2024

Published Quick reference component; retired Key details bar

The Quick reference component helps a user to check they are in the right place in an internal DWP service. It replaces the Key details bar which is now retired.

May 2024

The external service footer provides a standard layout and links for page footers on external DWP services. It uses the GOV.UK footer component.

The Header navigation component is a version of the internal service header that includes navigation items. It is included in dwp-frontend v2.7.0.

Published Language toggle component

We have made the Language toggle used in the Toggle to Welsh pattern into a separate component. It is included in dwp-frontend v2.7.0.

March 2024

Updated Key details bar guidance

The guidance for the Key details bar component has been updated to:

change the default design to include fewer data items
give clearer guidance on when and when not to use the component

Updated Cookies page guidance

The Cookies page guidance has been updated to include standard names and descriptions for Google Analytics cookies.

January 2024

The Side navigation component is a list of related links within a service.

December 2023

Published Choose alternative contact formats pattern

Choose alternative contact formats is a standard way to ask about users’ needs for accessible alternative formats for letters and phone calls.

February 2023

Published Find an address pattern

Find an address is a postcode lookup pattern that helps users to find and enter an address.

January 2023

Published Cookies page template

The Cookies page template gives standard content and layout for the cookies page on a DWP service. It replaces the retired “Consent to cookies” pattern.

August 2022

Published Internal service page template

The Internal service page is a basic page template for DWP services not hosted on service.gov.uk domains. It uses the internal service header and internal service footer.

July 2022

Updated Key details bar to use GOV.UK tags

The Key details bar now allows the use of standard tags from the GOV.UK design system, making use of existing standards and giving more flexibility to designers.

Published Contact a service pattern

The Contact a service pattern shows where and how to display contact information for a service’s offline support.

June 2022

The Internal service footer is a simplified standard footer with GOV.UK branding elements removed, for services used by DWP staff or agents. Alongside this component we also published guidance on how to adapt the GOV.UK Prototype Kit for an internal service.

Removed “Experimental” and “Observed” labels from patterns and components

We have removed the “Experimental” and “Observed” tags from the elements of the DWP Design System. Here’s why we decided to do this: Removing “Experimental” and “Observed” labels from the design system

March 2022

dwp-frontend available on npm

We made dwp-frontend publicly available on npm, and published guidance on how to install it.

Published working example of Add another thing pattern

We built a working example of the Add another thing pattern to help designers make the routing work correctly. The example includes detailed instructions for using the pattern in prototypes.

February 2022

Published Add another thing pattern and Hint text component

Add another thing is a pattern that helps users to add more than one thing of the same type, using a summary list.

Hint text gives clear guidance for how and when to use hint text in DWP services.

Published new guidance for designers

We have written a step by step guide for designers on using our components and patterns in prototypes.

New site organisation

We have reorganised this website, most noticeably updating the Community section. If you are looking for something and can’t find it, it’s probably moved there. We based the new structure on some tree testing research.

Published updated roadmap

The updated Roadmap shows our latest plans for the future of the DWP Design System.

November 2021

Published Toggle to Welsh pattern and Key details bar component

Both include coded examples and guidance on how and when to use them. Toggle to Welsh includes detailed accessibility information; Key details bar includes guidance on how much information is too much to include.

September 2021

Published Internal service header component

The Internal service header includes:

an example of the header with and without a sign in/out link
guidance on when it should be used

Published DWP Design System roadmap

The DWP Design System roadmap has been published and includes the future plans for the Design System.

Launched new DWP Design System website

The new site includes:

updated guidance on how to contribute to the DWP Design System
the DWP Design System Community Backlog
the DWP Design System team contact details
information about latest updates to the DWP Design System

Published timeline component

The timeline component includes:

an example of the timeline component
guidance on when to use it
information on how it should work

August 2021

Published manage a session timeout pattern

The pattern meets the WCAG 2.1 success criterion 2.2.1 ‘Timing Adjustable’. This means that a service must warn users before a session timeout occurs and allow them to extend the session.

The pattern uses a modal dialog based on code from the GOV.UK Design System community backlog.

The manage a session timeout pattern includes:

the full journey for the session timeout
guidance for the length of the timeout
a modal dialog box
recommended content for users who are signed in or not signed in to a service
an example of the session timeout for users with devices not running JavaScript

May 2021

This pattern has been retired and replaced by the cookies page and cookie banner on the GOV.UK Design System. Existing services that are using the DWP consent to cookies pattern do not need to update to the GOV.UK page and banner.

April 2021

Published make a declaration pattern

The pattern helps users to tell you that they have understood or agree to something before they submit an application or an online form.

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

Cookies on the DWP Design System website