Install DWP Frontend

You can copy HTML from the code samples on this site, but we recommend installing DWP Frontend instead and using Nunjucks to add components to your project. This makes it easier to maintain your code and keep components up to date.

These instructions assume you are using the GOV.UK Prototype Kit.

Install dwp-frontend using npm

  1. Start Terminal and navigate to your prototype’s root folder, for example: cd projects/my-new-project

  2. Run npm i @dwp/dwp-frontend

Add components to your prototype

With DWP Frontend installed you can use the Nunjucks code from any component to add that component to your prototype.

For instance, the following code imports the Timeline component and then adds a timeline to a page. This particular timeline is called “Appointments” and has one event. 

{% from "timeline/macro.njk" import dwpTimeline %}

{{ 
  dwpTimeline({ 
    title: "Appointments",
    events: [
      {
        name: "John Smith",
        state: "Accepted",
        date: "11 Aug 2021"
      }
    ]
  })
}}

For more help setting up or using DWP Frontend, email the design system team or use the #design-system Slack channel.

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