Components

Components are:

You can use these individual components in many different patterns and contexts. For example, you can use the text input component to ask for an email address, a National Insurance number or someone's name. These component types have been broken down for specific use cases on Power Pages.

If you require a component which is not included in the list below, refer to the patterns included in this manual in the first instance. Some of the general use components, for example, breadcrumbs and error summary, are already embedded in within the liquid template layouts. The patterns section will advise how to work with these components.

For all other components, please refer to the GOV.UK Design System. These will not require any customisation to work with Power Pages other than changing the content in the example HTML to meet your specific requirements.

Component Overview
Attachment Use the attachment component to display downloadable file attachments (e.g. PDFs, Word documents) with a thumbnail, title, and metadata like file type or size.
Card The card component is a versatile user interface element used to display grouped information in a visually appealing and organised way. They can enhance user interaction and content presentation across various applications and devices.
Checkboxes Use the checkboxes component to assist users in selecting multiple options from a list or toggling a single option on or off. When submitting data to CRM, this component is suitable for boolean, select or text type target fields.
Contents list Use a contents list at the top of a page to facilitate user navigation within a small group of related pages or page sections.
Dashboard Use the dashboard component to present a summarised view of information for groups. This is particularly beneficial for segregating statuses within a large dataset or displaying financial transaction totals.
Date input Use the date input component when users need to input a memorable or easily retrievable date. When submitting data to CRM, this component is suitable for date type target fields.
Email input Use the email input component when allowing users to input their email address. When submitting data to CRM, this component is suitable for single line of text of type email target field.
Number input Use the number input component when you need to let a user enter either a whole number, a decimal number or either. When submitting data to CRM, this can be used where the target field is an appropriate number type.
Radios Use the radios component when users can only select one option from a list. This can be used when the target field is a lookup, select, boolean or text type.
Search Use the search component when you need to let users search and select a record from a database table. e.g. A users might enter a Companies House Number to find an organisation. When submitting data to CRM, the target field should be a lookup to the selected record.
Select The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use. This can be used when the target field is a lookup, select, or text type.
Sortable table Use the sortable table component to let users sort columns in ascending or descending order. This may be useful to help find data within a large table of data.
Telephone input Use the telephone input component when you need to let users enter a phone number. When submitting data to CRM, this can be used when the target field is a single line of text of type telephone.
Textarea Use the textarea component when you need to let users enter an amount of text that's longer than a single line. When submitting data to CRM, this can be used when the target field is a multi-line text area type.
Text input Use the text input component when you need to let users enter text that's no longer than a single line. When submitting data to CRM, this can be used when the target field is a single line of text field, excluding email and telephone types, which have their own component examples.
Timeline Use the timeline component to help users understand what has happened and when. For example, a conversation history.