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.

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

  • 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

  • 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

  • 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

  • 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

  • Contents list

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

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

  • 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, which uses the Design System service navigation component.

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

  • Figure

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

  • 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

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

  • 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

    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

  • 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

  • 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

  • Published dates

    Dates to reflect when content was published and updated

  • 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

  • Select with search (experimental)

    A dropdown select with search

  • 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

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

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

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

  • Tag

    Use the tag component to show users the status of something. For example, the server environment the page is being rendered from.

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