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:
- In your code editor, go to your prototype’s folder and open the file
app > assets > sass > application.scss
- In the component’s code example select the ‘CSS’ tab and use the ‘Copy code’ button to copy to your clipboard
application.scss, find the section marked ‘Add extra styles here’
- 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:
- In your code editor, open the page where you want to use the component
- In the component’s code example select the ‘HTML’ tab and use the ‘Copy code’ button to copy to your clipboard
- In your page, find the place where you want the component to appear
- Paste the HTML into your page and save your changes
Repeat these steps for each component you want to use.
Get in touch
If you’ve got a question, idea or suggestion email the Design System team on email@example.com