Get started: HTML and CSS

If your prototype uses the GOV.UK Prototype Kit you can use DWP components by copying CSS and HTML from the code examples provided.

If you don’t feel comfortable configuring your prototype or don’t have permission to do so, the person on your team who manages it should be able to make these changes for you.

Step by step

You will need both the CSS and the HTML for each component you want to use.

Add styles with CSS

First, use CSS to add styles to your prototype:

  1. In your code editor, go to your prototype’s folder and open the file app > assets > sass > application.scss
  2. In the component’s code example select the ‘CSS’ tab and use the ‘Copy code’ button to copy to your clipboard
  3. In application.scss, find the section marked ‘Add extra styles here’
  4. Paste the CSS code below this heading and save your changes

Add the component with HTML

You can now use HTML to add the component to individual pages:

  1. In your code editor, open the page where you want to use the component
  2. In the component’s code example select the ‘HTML’ tab and use the ‘Copy code’ button to copy to your clipboard
  3. In your page, find the place where you want the component to appear
  4. Paste the HTML into your page and save your changes

Repeat these steps for each component you want to use.

For more help, 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