Skip to content

This is an example product page for use by GaaP products.

Notifications You must be signed in to change notification settings

alphagov/product-page-example

Repository files navigation

Product Page Example

This repository contains a number of components that can be used to build 'product pages' for GOV.UK Products like GOV.UK Pay, GOV.UK Notify and GOV.UK Registers.

Screenshot of the example product page

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.

Components

For documentation on each component, read the comments at the top of each component's stylesheet:

Usage

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.

Frontend Dependencies

GOV.UK Frontend and GaaP Analytics are included using NPM and bundled in on build. You can include more NPM modules easily by installing them as a dependency and including paths to them. This works because within config.rb sprockets is instructed to look within node_modules/.

Getting started with Google Analytics

To get started with Google Analytics you will need an account and a tracking ID you can get these by talking to the GaaP programme team. The analytics ID is then set within config.rb.

To learn about how to get started with event tracking head over to GaaP Analytics.

Running Example Locally

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 dependencies
  • npm install to install the frontend dependencies
  • bundle exec middleman server - to start middleman's built in server
  • open http://localhost:4567 - to open the example in your browser

About

This is an example product page for use by GaaP products.

Topics

Resources

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published