Component Guide

Components are packages of template, style, behaviour and documentation that live in your application.

See the govuk_publishing_components gem for further details, or a list of all component guides.

• Read about how to release a new version of the gem
• View component audits

Components in this application (14)

• Datetime fields

  Use the datetime fields component to help users enter a datetime for a specific event.

• Govspeak Editor

  A progressively enhanced textarea with added Govspeak specific functionality

• Image cropper

  Displays an image with resizable crop function

• Inset prompt

  A prompt to users represented as inset content

• Miller Columns

  Miller columns (cascading lists) for hierarchical topic selection on GOV.UK

• Pagination

  Help users navigate forwards and backwards through a series of pages. For example, search results or guidance that’s divided into multiple website pages.

• Secondary navigation

  Displays a secondary navigation with the current page marked accordingly

• Select with search

  A dropdown select with search

• Single Image Upload

  A component for use where a single image is uploaded within the page

• Sub navigation

  Displays a sub navigation with the current page marked accordingly

• Summary Card Component

  An extension of Summary List Component

• Summary Card List

  Similar to the Summary Card Component, but renders an ordered list in place of a descriptive list with a key value pair.

• Translated input

  Renders an input field and the english translation within a details component if one is present

• Translated textarea

  Renders a textarea and the english translation within a details component if one is present

Gem components used by this app (40)

Suggested imports for this application

@import 'govuk_publishing_components/govuk_frontend_support'; @import 'govuk_publishing_components/component_support'; @import 'govuk_publishing_components/components/accordion'; @import 'govuk_publishing_components/components/add-another'; @import 'govuk_publishing_components/components/attachment'; @import 'govuk_publishing_components/components/back-link'; @import 'govuk_publishing_components/components/button'; @import 'govuk_publishing_components/components/character-count'; @import 'govuk_publishing_components/components/checkboxes'; @import 'govuk_publishing_components/components/contents-list'; @import 'govuk_publishing_components/components/copy-to-clipboard'; @import 'govuk_publishing_components/components/date-input'; @import 'govuk_publishing_components/components/details'; @import 'govuk_publishing_components/components/error-alert'; @import 'govuk_publishing_components/components/error-message'; @import 'govuk_publishing_components/components/error-summary'; @import 'govuk_publishing_components/components/fieldset'; @import 'govuk_publishing_components/components/file-upload'; @import 'govuk_publishing_components/components/glance-metric'; @import 'govuk_publishing_components/components/govspeak'; @import 'govuk_publishing_components/components/heading'; @import 'govuk_publishing_components/components/hint'; @import 'govuk_publishing_components/components/input'; @import 'govuk_publishing_components/components/inset-text'; @import 'govuk_publishing_components/components/label'; @import 'govuk_publishing_components/components/layout-footer'; @import 'govuk_publishing_components/components/layout-for-admin'; @import 'govuk_publishing_components/components/layout-header'; @import 'govuk_publishing_components/components/lead-paragraph'; @import 'govuk_publishing_components/components/notice'; @import 'govuk_publishing_components/components/phase-banner'; @import 'govuk_publishing_components/components/radio'; @import 'govuk_publishing_components/components/reorderable-list'; @import 'govuk_publishing_components/components/search'; @import 'govuk_publishing_components/components/select'; @import 'govuk_publishing_components/components/skip-link'; @import 'govuk_publishing_components/components/summary-card'; @import 'govuk_publishing_components/components/summary-list'; @import 'govuk_publishing_components/components/table'; @import 'govuk_publishing_components/components/tabs'; @import 'govuk_publishing_components/components/textarea'; @import 'govuk_publishing_components/components/warning-text';

//= require govuk_publishing_components/lib //= require govuk_publishing_components/components/accordion //= require govuk_publishing_components/components/add-another //= require govuk_publishing_components/components/button //= require govuk_publishing_components/components/character-count //= require govuk_publishing_components/components/checkboxes //= require govuk_publishing_components/components/copy-to-clipboard //= require govuk_publishing_components/components/error-summary //= require govuk_publishing_components/components/file-upload //= require govuk_publishing_components/components/govspeak //= require govuk_publishing_components/components/layout-header //= require govuk_publishing_components/components/radio //= require govuk_publishing_components/components/reorderable-list //= require govuk_publishing_components/components/skip-link //= require govuk_publishing_components/components/table //= require govuk_publishing_components/components/tabs

• Accordion (experimental)

  The accordion component lets users show and hide sections of related content on a page.

• Add another (experimental)

  The "add another" component lets users input multiple values for a set of form fields.

• Admin layout

  A layout to be used by admin applications

• Attachment

  Displays a link to download an attachment and metadata about the file

• Back link

  A link used to help users get back, useful when not using other navigation such as breadcrumbs

• Button

  Use buttons to move though a transaction, aim to use only one button per page.

• Contents list

  Provides a list of links with options for dashes or numbering.

• Copy to clipboard

  Content that a user is intended to copy, like a URL

• Details

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

• Error alert

  Used at the top of the page, to summarise a unsuccessful user action.

• Form character count

  Help users enter text when there is a limit on the number of characters they can type

• Form checkboxes

  Let users select one or more options with checkboxes.

• Form date input

  Use the date input component to help users enter a memorable date or one they can easily look up.

• Form error summary

  Used at the top of the page, to summarise validation errors.

• Form fieldset

  The fieldset element is used to group several controls within a web form. The legend element represents a caption for the content of its parent fieldset.

• Form file upload

  Help users select and upload a file

• Form hint text

  Use hints for any form fields.

• Form input

  A form input field and an associated label.

• Form label

  Use labels for all form fields.

• Form radio button

  A radio button is an element that allows users to answer a question by selecting an option. If you have a question with more than one option you should stack radio buttons.

• Form textarea

  A textarea field and an associated label

• Glance metric

  The glance metric component is an at-a-glance view of data for a content item. The minimum requirements for it to display are a name and figure.

• Govspeak content

  To display long form text which has been converted from Govspeak

• Heading

  A text heading

• Inset text

  Use the inset text component to differentiate a block of text from the content that surrounds it.

• Layout footer

  The footer provides copyright, licensing and other information

• Layout header

  The header provides the crown logo, product or service name and navigation

• Lead paragraph

  The opening paragraph of content. Typically a content item’s description field.

• List

  A list - unordered or ordered, with or without counters / bullet points.

• Notice

  A notice to convey and highlight information

• Phase banner

  A banner that indicates content is in a certain phase (usually alpha or beta), with an optional explanation

• Reorderable list

  A list of items that can be reordered

• Search

  Search box

• Select

  A dropdown select

• Skip link

  Skip link component helps keyboard-only users skip to the main content on a page

• Summary card

  An extension of the Summary list component. It can be used where there are multiple groups of lists to be displayed in their own discrete sections.

• Summary list

  Use the summary list to summarise information, for example, a user’s responses at the end of a form.

• Table

  A table component to make information easier to compare and scan for users.

• Tabs (experimental)

  The tabs component lets users toggle between related sections of content.

• Warning text

  Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.

Gem components not used by this app (52)

• Action link

  Use action links to help users get to the next stage of a journey quickly.

• Attachment link

  A link to a file with metadata of the file contents

• Back to top link

  An anchor link intended to allow users to return to the top of the content.

• Big number

  A big number, with a label if needed, for visualising quantitative values such as the number of government departments or historical prime ministers.

• Breadcrumbs

  Navigational breadcrumbs, showing page hierarchy

• Cards

  A grid of cards that have a link and a description

• Contents list with body

  Combines contents-list and back-to-top components with block of body markup

• Contextual breadcrumbs

  Breadcrumbs that shows different things depending on the page

• Contextual footer

  Footer that shows different things depending on the page

• Contextual guidance

  Provides a container with additional information when focusing an input field (e.g. input, textarea)

• Contextual sidebar

  Sidebar that shows different things depending on the page

• Cookie banner

  Help users manage their personal data by telling them when you store cookies on their device.

• Cross service header

  The One Login header contains two distinct navigation menus - one for GOV.UK One Login links and another for internal service navigation, which uses the Design System service navigation component.

• Devolved Nations (experimental)

  A banner for linking to alternative content for other nations.

• Document list

  An ordered list of documents including a document type, when updated and a link.

• Emergency banner

  A site-wide banner used in the event of an emergency

• Feedback

  Invites user feedback on the current page.

• Figure

  A figure containing an image that never exceeds the component’s width

• Form error message

  Use error messages for any form fields.

• Global banner

  A site-wide banner used to convey important information

• Google Tag Manager script

  Google Tag Manager script for tracking user interaction: - gtm_id is the ID for the Google Tag Manager account - gtm_preview allows a tag to be previewed in the Google Tag Manager interface - gtm_auth is the identifier of an environment for Google Tag Manager

• Govspeak content (HTML Publications)

  To display long form text with numbered parts, which has been converted from Govspeak

• Image card

  Image and associated text with a link

• Intervention

  An area that contains personalised content to the user

• Inverse header

  A wrapper to contain header content in white text

• Layout super navigation header

  The super navigation header provides a consistent header across GOV.UK.

• Machine readable metadata

  Generates schema.org JSON-LD for use by search engines

• Meta Tags

  Meta tags to provide analytics information about the current page

• Metadata block

  To display relevant metadata about organisations and tags for a document

• Modal dialogue (experimental)

  Shows only one section, with no other navigation options, until the user finishes the immediate task

• Option select

  A scrollable list of checkboxes to be displayed on a form where one might otherwise use a multi-select

• Organisation logo

  Organisation text with crest and branded border colour

• Panel

  Used on confirmation or results pages to highlight important content.

• Password input

  The password input component helps users to create and enter passwords.

• Previous and next navigation

  Navigational links that allow users to navigate within a series of pages or elements.

• Print link

  A link with a print icon to help users print the current page

• Public layout

  A layout to be used by public-facing applications

• Published dates

  Dates to reflect when content was published and updated

• Related Navigation

  Component showing related content, including topics, guidance and collections

• Search with autocomplete (experimental)

  A version of the search component enhanced with the ability to fetch and display search suggestions from a remote source as a user types.

• Secondary navigation

  Displays a secondary navigation with the current page marked accordingly

• Service Navigation

  Renders a box with a link to sign up for email notifications

• Share links

  Social media links for linking to or sharing the current page on social media.

• Signup link

  Renders a box with a link to sign up for email notifications

• Single page notification button

  A button that subscribes the user to email notifications to a page

• Step by step navigation

  A series of expanding/collapsing steps designed to navigate a user through a process

• Step by step navigation header

  Shows that a content page is part of a step by step navigation

• Step by step navigation related links

  Links to step by step navigations that a page is part of

• Subscription links

  Links to ‘Get emails’ and ‘Subscribe to feed’

• Success alert

  Used at the top of the page, to summarise a successful user action.

• Summary banner

  A page banner that is currently used on consultations and calls for evidence to display a summary or other important information.

• Translation navigation

  A list of links to available translations

If you cannot find a suitable component consider extending an existing component or creating a new one.