Get started: HTML and CSS

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

If a code example doesn’t include a CSS tab, it’s because the pattern or component only uses styles already included in the GOV.UK Prototype Kit. You can just copy the HTML in these cases.

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

If the code sample includes CSS, you will need both the CSS and the HTML for it to work as intended. If it doesn’t, you can just add the HTML to your pages.

Add styles with CSS

First, use CSS to add any new 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