This repository contains a number of components that can be used to build 'product pages' for GOV.UK Products like GOV.UK Pay or GOV.UK Notify.
It is also a middleman site for the sole purpose of providing an example of how to use the components to build a site. You do not have to use middleman to build your product page.
This shares a number of components and design considerations with the tech docs template, which may also be useful for product teams.
For documentation on each component, read the comments at the top of each component's stylesheet:
- Breadcrumbs
- Content Section
- Full Width Form
- GOV.UK Logo
- Header
- Hero 'Alternative Action'
- Hero Button
- Masthead
- Phase Banner
- Related Items
- Skip Link
- Sub Navigation
For now, please copy the Sass and Javsacript for the components that you require into your own project, and use your own asset pipeline to e.g. compile the Sass files into CSS.
Because each product team have their own tech stack, making these dependencies available in a more automated way that worked for everyone was not part of the MVP, but it's something we're looking at for the future.
GOV.UK Elements, GOV.UK Frontend Toolkit and GOV.UK Template are vendored
using Bower into /components
. If you are not using middleman, it is strongly
recommended that you do not do this – there are much better ways to install
these dependencies, which can be found in their respective READMEs.
If you wish to run the example in your own browser, you'll need to run the following commands from the root of this project:
bundle install
to install middleman and its dependenciesnpm install
to install the frontend dependenciesbundle exec middleman server
- to start middleman's built in serveropen http://localhost:4567
- to open the example in your browser