Components

Components are reusable parts of the user interface that have been made to support a variety of applications.

Individual components can be used in multiple different patterns and contexts. For example, the text input component can be used to ask for an email address, contact number or company name and address.

At The Pensions Regulator our components are based on the the Governement Digital Design System and refering to their components library is always a good place to start when designing new components for SSRA Portals. design-system.service.gov.uk/components

TPR uses React.js to build TPRs offical components library. For designers who may not know React.js we have built a library of simple code components using the Government Design System Prototyping Kit specifically for building prototyping. These can be found in the left hand navigation on this page you will.

Adding styles

You will need to copy and past the following styles into the head <head>... </head> of your prototype for these components to work.

<link rel="stylesheet" href="../user-research/tests/common/css/gds-style.css">

<link rel="stylesheet" href="../user-research/tests/common/css/main.css">

<link rel="stylesheet" href="../user-research/tests/common/css/css/tpr-style.css">