Government Frontend 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 (7)

• Back to top link

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

• Banner

  A page banner, designed to highlight important information

• Contents list with body

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

• Download link

  A link with a file download icon

• Figure

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

• Important metadata

  List of document-type specific metadata

• Published dates

  Dates to reflect when content was published and updated

Gem components used by this app (44)

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/attachment'; @import 'govuk_publishing_components/components/back-link'; @import 'govuk_publishing_components/components/big-number'; @import 'govuk_publishing_components/components/breadcrumbs'; @import 'govuk_publishing_components/components/button'; @import 'govuk_publishing_components/components/chat-entry'; @import 'govuk_publishing_components/components/contents-list'; @import 'govuk_publishing_components/components/contextual-sidebar'; @import 'govuk_publishing_components/components/details'; @import 'govuk_publishing_components/components/devolved-nations'; @import 'govuk_publishing_components/components/document-list'; @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/govspeak'; @import 'govuk_publishing_components/components/govspeak-html-publication'; @import 'govuk_publishing_components/components/heading'; @import 'govuk_publishing_components/components/hint'; @import 'govuk_publishing_components/components/image-card'; @import 'govuk_publishing_components/components/input'; @import 'govuk_publishing_components/components/inset-text'; @import 'govuk_publishing_components/components/intervention'; @import 'govuk_publishing_components/components/inverse-header'; @import 'govuk_publishing_components/components/label'; @import 'govuk_publishing_components/components/lead-paragraph'; @import 'govuk_publishing_components/components/metadata'; @import 'govuk_publishing_components/components/notice'; @import 'govuk_publishing_components/components/organisation-logo'; @import 'govuk_publishing_components/components/phase-banner'; @import 'govuk_publishing_components/components/previous-and-next-navigation'; @import 'govuk_publishing_components/components/print-link'; @import 'govuk_publishing_components/components/radio'; @import 'govuk_publishing_components/components/related-navigation'; @import 'govuk_publishing_components/components/search'; @import 'govuk_publishing_components/components/share-links'; @import 'govuk_publishing_components/components/signup-link'; @import 'govuk_publishing_components/components/single-page-notification-button'; @import 'govuk_publishing_components/components/skip-link'; @import 'govuk_publishing_components/components/step-by-step-nav'; @import 'govuk_publishing_components/components/step-by-step-nav-header'; @import 'govuk_publishing_components/components/step-by-step-nav-related'; @import 'govuk_publishing_components/components/subscription-links'; @import 'govuk_publishing_components/components/success-alert'; @import 'govuk_publishing_components/components/title'; @import 'govuk_publishing_components/components/translation-nav'; @import 'govuk_publishing_components/components/warning-text';

//= require govuk_publishing_components/lib //= require govuk_publishing_components/components/accordion //= require govuk_publishing_components/components/button //= require govuk_publishing_components/components/error-summary //= require govuk_publishing_components/components/govspeak //= require govuk_publishing_components/components/image-card //= require govuk_publishing_components/components/intervention //= require govuk_publishing_components/components/metadata //= require govuk_publishing_components/components/print-link //= require govuk_publishing_components/components/radio //= require govuk_publishing_components/components/single-page-notification-button //= require govuk_publishing_components/components/skip-link //= require govuk_publishing_components/components/step-by-step-nav

• Accordion (experimental)

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

• 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

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

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

  Sidebar that shows different things depending on the page

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

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

• 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

• 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

• Notice

  A notice to convey and highlight information

• Organisation logo

  Organisation text with crest and branded border colour

• Page title

  A page title with optional context label

• 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

• Related Navigation

  Component showing related content, including topics, guidance and collections

• Search

  Search box

• 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

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

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

Gem components not used by this app (42)

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

  A link to a file with metadata of the file contents

• 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

• Contextual guidance

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

• 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

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

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

• 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

• Panel

  Used on confirmation or results pages to highlight important content.

• Password input

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

• Public layout

  A layout to be used by public-facing applications

• Reorderable list

  A list of items that can be reordered

• 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

• 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

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

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