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
-
Accordion (experimental)
The accordion component lets users show and hide sections of related content on a page.
-
Action link
Use action links to help users get to the next stage of a journey quickly.
-
Admin layout
A layout to be used by admin applications
-
Attachment
Displays a link to download an attachment and metadata about the file
-
Attachment link
A link to a file with metadata of the file contents
-
Back link
A link used to help users get back, useful when not using other navigation such as breadcrumbs
-
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
-
Button
Use buttons to move though a transaction, aim to use only one button per page.
-
Cards
A grid of cards that have a link and a description
-
Chart (experimental)
The chart component presents a data chart and a tabular version of the same data
-
Chat entry
Entry point for GOV.UK Chat
-
Contents list
Provides a list of links with options for dashes or numbering.
-
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.
-
Copy to clipboard
Content that a user is intended to copy, like a URL
-
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.
-
Details
Make a page easier to scan by letting users reveal more detailed information only if they need it
-
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
-
Error alert
Used at the top of the page, to summarise a unsuccessful user action.
-
Feedback
Invites user feedback on the current page.
-
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 message
Use error messages for any form fields.
-
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
-
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
To display long form text which has been converted from Govspeak
-
Govspeak content (HTML Publications)
To display long form text with numbered parts, which has been converted from Govspeak
-
Heading
A text heading
-
Image card
Image and associated text with a link
-
Inset text
Use the inset text component to differentiate a block of text from the content that surrounds it.
-
Intervention
An area that contains personalised content to the user
-
Inverse header
A wrapper to contain header content in white text
-
Layout footer
The footer provides copyright, licensing and other information
-
Layout header
The header provides the crown logo, product or service name and navigation
-
Layout super navigation header
The super navigation header provides a consistent header across GOV.UK.
-
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.
-
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
-
Notice
A notice to convey and highlight information
-
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
-
Page title
A page title with optional context label
-
Panel
Used on confirmation or results pages to highlight important content.
-
Password input
The password input component helps users to create and enter passwords.
-
Phase banner
A banner that indicates content is in a certain phase (usually alpha or beta), with an optional explanation
-
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
-
Related Navigation
Component showing related content, including topics, guidance and collections
-
Reorderable list
A list of items that can be reordered
-
Search
Search box
-
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
-
Select
A dropdown select
-
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
-
Skip link
Skip link component helps keyboard-only users skip to the main content on 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 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.
-
Translation navigation
A list of links to available translations
-
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.
If you cannot find a suitable component consider extending an existing component or creating a new one.