Skip to main content
Beta

This is a new service – give us your feedback to help improve it.

Site map

Get started

Quickly and easily add National Archives styles and components to your projects.

  • Prototyping — Create and iterate on rich and responsive prototypes to test your assumptions.
  • Production — Work with established technologies to create stable, consistent services.

Styles

Make your service look part of The National Archives with guides for applying layout, typography, colour and images.

  • Colours — Use colours to add interest to your pages and content.
  • Forms — Allow users to enter information, search for content or perform tasks.
  • Grid — Use the TNA grid system to help position and organise content on your pages.
  • Headers — Use one of the common standardised header patterns to start your page.
  • Icons — Use icons sparingly to reinforce call to actions and support small pieces of information such as metadata.
  • Images — Use images to provide additional visual context.
  • Links — Link to pages within your service or to external resources.
  • Lists — Create lists of content to more easily allow users to find what they need.
  • Media — Provide services for a variety of screen sizes as well as print media.
  • Page template — Use the TNA Frontend base template to create consistent page layouts.
  • Spacing — Space content out in a consistent and flexible manner that works for all screen sizes.
  • Tables — Use a tables to display tabular data.
  • Typography — Utilise a full range of typography to more clearly communicate your content.

Components

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

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

Content

Write content in a consistent and understandable way that makes it easier for users to use your service.

  • Dates and times — Write dates and times in a consistent format.
  • Error pages — Provide users with clear and helpful error pages when something goes wrong.
  • Style guide — Write content in the style of The National Archives.