Components

Save time with reusable, accessible components for forms, navigation, panels, tables and more.

Components are reusable parts of the user interface that have been made to support a variety of applications.

You can use individual components in many different patterns and contexts. For example, you can use the text input component to ask for an email address, a National Insurance number or someone’s name.

Each component in the National Archives Design System has coded examples. If you’re using the GOV.UK Prototype Kit, or have included TNA Frontend in your build, coded examples will render the same as in the Design System.

The National Archives Design System’s code is public and freely available under a Massachusetts Institute of Technology (MIT) license. You can find our code repositories on GitHub, where we code in the open.

Accordion

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

Breadcrumbs help users to understand where they are within a websites structure and move between levels.
Button

The button component can be used as a call to action link or as a button element for use within forms.
Card

Use the card component for providing previews to articles and pages.
Checkboxes

Checkboxes allow users to post multiple options for the same field.
Compound filters

The compound filters can show which multiple filters have been selected. This is useful for search patterns.
Cookie banner

The cookie banner component allows a user to either accept or decline the use of cookies within a service.
Date input

Use the date input component to allow the user to enter a date when populating data, such as submitting a record.
Date search

Use the date search component to allow the user to enter a date to search with.
Details

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

Summarise form errors on the page and provide links to help users complete them.
Files list

Display a list of files available to download.
Footer

The footer component provides an area to use for copyright information and additional links to things like social media.
Gallery

Use the gallery component to show a list of images.
Global header

The global header component shows users they are on a main National Archives service and provides navigation links.
Header

The header component shows users they are on a National Archives service and provides navigation links.
Hero

Use the hero component to start an article.
Index grid

Use the index grid component to display a grid of links such as displaying a list of all child pages in a hierarchy.
Pagination

Use a list-type layout if users need to navigate through pages of similar items.
Phase banner

The phase banner can display the phase that the service is currently in.
Picture

The picture component can display an image with additional information.
Quick filters

The quick filters component provides users with a list of links which act as a quick filter to content.
Radios

Radios allow users to select a single options for a form field.
Search field

Use the search field component as an entry point into searches.
Select

The select component allows users to select a single value from a list of options.
Sidebar

The sidebar can be used in a page to provide additional navigation.
Skip link

Use the skip link at the start of a page to allow the user to jump straight to the most important content.
Tabs

The tabs component can contain multiple tabs of information.
Text input

The text input component allows users to enter short string of text such as their email address, a record title or a postcode.
Textarea

Use the textarea component to allow the users to enter a longer string of text information such as feedback.
Warning

The warning component provides the user with important information about the page or article.

This website uses cookies

Components