Components are reusable parts of user interface that have been designed to specifically support your build.

Components are reusable parts of the user interface that have been adapted to work with Dynamics 365 Power Pages. They 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 within the liquid template layouts. The patterns section will advise how to work with these components.

In this section

  • 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.

  • Checkboxes

    Use the checkboxes component to assist users in selecting multiple options from a list or toggling a single option on or off.

  • Chevron card

    Use the chevron card component to display a list of linked items with titles, descriptions and a visual chevron indicator.

  • 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.

  • Date input

    Use the date input component when users need to input a memorable or easily retrievable date.

  • Email input

    Use the email input component when allowing users to input their email address.

  • Feedback

    Use the feedback component to collect user feedback about a page with a simple 'Is this page useful?' prompt.

  • Filter panel

    Use the filter panel component to help users narrow down a large list of results by applying multiple filters.

  • Loading spinner

    Use the loading spinner component to indicate that content is being loaded or an action is being processed.

  • Number input

    Use the number input component when you need to let a user enter either a whole number, a decimal number or either.

  • Print link

    Use the print link component to let users print the current page.

  • Radios

    Use the radios component when users can only select one option from a list.

  • Search

    Use the search component when you need to let users search and select a record from a database table.

  • Select

    The select component should only be used as a last resort in public-facing services.

  • Sidebar

    Use the sidebar component to display related links or supplementary information alongside main content.

  • Sortable table

    Use the sortable table component to let users sort columns in ascending or descending order.

  • Sub-navigation

    Use the sub-navigation component to help users navigate between related pages or sections within a service.

  • Telephone input

    Use the telephone input component when you need to let users enter a phone number.

  • Textarea

    Use the textarea component when you need to let users enter an amount of text that's longer than a single line.

  • Text input

    Use the text input component when you need to let users enter text that's no longer than a single line.

  • Timeline

    Use the timeline component to help users understand what has happened and when.

Components available on GOV.UK Design System

The following components from the GOV.UK Design System do not require any customisation to work with Power Pages and Dynamics 365. You can copy the HTML directly from the GOV.UK Design System and use it in your web templates.

  • Accordion

    Let users show and hide sections of related content on a page.

  • Button

    Help users carry out an action like starting an application or saving their information.

  • Details

    Make a page easier to scan by letting users reveal more detailed information only if they need it.

  • Inset text

    Differentiate a block of text from the content that surrounds it.

  • Notification banner

    Tell the user about something they need to know about, but that's not directly related to the page content.

  • Pagination

    Help users navigate forwards and backwards through a series of pages.

  • Panel

    Communicate a successful or important action to the user.

  • Summary list

    Summarise information, for example, a user's responses at the end of a form.

  • Table

    Make information easier to compare and scan for users.

  • Tabs

    Let users navigate between related sections of content, displaying one section at a time.

  • Tag

    Show users the status of something with a phase indicator.

  • Task list

    Help users understand tasks involved in completing a transaction and know when they have finished.

  • Warning text

    Warn users about something important, such as legal consequences of an action.