Finder 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 (5)

• Date filter

  Form fields to filter a finder by a date range

• Expander (experimental)

  A block of content that can be expanded and collapsed.

• Filter panel

  Displays a result count and a toggleable panel with arbitrary content, a submit input, and an optional reset link.

• Filter section

  Displays a section with status text that be expanded/collapsed

• Filter summary

  Displays a summary of applied filters as links that can remove a specific filter. Also a link for clearing all filters.

Gem components used by this app (24)

Suggested imports for this application

@import 'govuk_publishing_components/govuk_frontend_support'; @import 'govuk_publishing_components/component_support'; @import 'govuk_publishing_components/components/breadcrumbs'; @import 'govuk_publishing_components/components/button'; @import 'govuk_publishing_components/components/checkboxes'; @import 'govuk_publishing_components/components/date-input'; @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/heading'; @import 'govuk_publishing_components/components/hint'; @import 'govuk_publishing_components/components/input'; @import 'govuk_publishing_components/components/inverse-header'; @import 'govuk_publishing_components/components/label'; @import 'govuk_publishing_components/components/metadata'; @import 'govuk_publishing_components/components/notice'; @import 'govuk_publishing_components/components/option-select'; @import 'govuk_publishing_components/components/phase-banner'; @import 'govuk_publishing_components/components/previous-and-next-navigation'; @import 'govuk_publishing_components/components/radio'; @import 'govuk_publishing_components/components/search'; @import 'govuk_publishing_components/components/search-with-autocomplete'; @import 'govuk_publishing_components/components/select'; @import 'govuk_publishing_components/components/skip-link'; @import 'govuk_publishing_components/components/step-by-step-nav-header'; @import 'govuk_publishing_components/components/subscription-links';

//= require govuk_publishing_components/lib //= require govuk_publishing_components/components/button //= require govuk_publishing_components/components/checkboxes //= require govuk_publishing_components/components/error-summary //= require govuk_publishing_components/components/govspeak //= require govuk_publishing_components/components/metadata //= require govuk_publishing_components/components/option-select //= require govuk_publishing_components/components/radio //= require govuk_publishing_components/components/search-with-autocomplete //= require govuk_publishing_components/components/skip-link

• Breadcrumbs

  Navigational breadcrumbs, showing page hierarchy

• Button

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

• Contextual breadcrumbs

  Breadcrumbs that shows different things depending on the page

• Document list

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

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

  A form input field and an associated label.

• 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

• Heading

  A text heading

• Inverse header

  A wrapper to contain header content in white text

• 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

• Option select

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

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

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

• Select

  A dropdown select

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

Gem components not used by this app (70)

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

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

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

  Use error messages for any form fields.

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

  Use labels for all form fields.

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

• 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

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

• Modal dialogue (experimental)

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

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

• 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

• Secondary navigation

  Displays a secondary navigation with the current page marked accordingly

• 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

• 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

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