Skip to main content Skip to list of get started
Beta

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

Get started

Prototyping

Create and iterate on rich and responsive prototypes to test your assumptions.

Contents

  1. Figma
  2. HTML

Figma

In the early stages, Figma can be used as a prototyping tool.

Create a copy of the National Archives base Figma document to start designing your pages.

HTML

Use the GOV.UK Prototype kit to create rich, interactive and responsive prototypes.

The National Archives frontend includes support for the GOV.UK Prototype Kit. You can use the supplied components and styles with the prototype kit to make prototypes that look like National Archives services.

Create a new National Archives prototype

  1. Create an empty directory mkdir my-new-prototype
  2. Enter the new directory cd my-new-prototype
  3. Use npx govuk-prototype-kit create to create a new prototype project
  4. Install the frontend styles with npm install @nationalarchives/frontend
  5. Run npm run dev to start up the prototype kit
  6. Visit localhost:3000 in your browser to see the prototype

Creating a new prototype

Adding custom styles

  1. Create a new SCSS file in app/assets/sass called custom.scss (or whatever you prefer)
  2. Create a new layout in app/views/layout called base.html (or whatever you prefer) which extends the National Archives prototype kit layout
  3. Set a default theme (see theme colours) and themeAccent (see accent colours)
  4. Link in your custom CSS file
  5. Ensure new pages extend your new layout with {% extends "layouts/base.html" %}

Example layout 

{% extends "nationalarchives/templates/layouts/_prototype-kit.njk" %}

{% set theme = "dark" %}
{% set themeAccent = "yellow" %}

{% block pageTitle %}My Service - The National Archives{% endblock %}

{% block stylesheets %}
  {{ super() }}
  <link href="/public/stylesheets/custom.css" rel="stylesheet" type="text/css" />
{% endblock %}

Using the components in your prototype

The National Archives components can be included in your prototype using the templating language Nunjucks.

Examples are given in the components section. Each component example shows all the Nunjucks options available to that component.

Nunjucks

Nunjucks options
Primary options
Name Type Description
text string

The text of the button.
html string

The HTML to use as the text of the button. Setting this overwrites the text property.
href string

A URL to use as a link for the button.
title string

A title attribute for the button.
icon string

The name of a Font Awesome icon, without the prefixed fa-.
iconSvg string

The SVG to use as the icon. Setting this overwrites the icon property.
accent boolean

If true, set the colour of the button to the page’s accent colour.
small boolean

If true, make the button smaller.
plain boolean

If true, remove the background colour of the button and make it look more like a link.
iconOnly boolean

If true, don’t show the text of the button.
iconOnlyOnMobile boolean

If true, show both the text and icon on larger devices but only show the icon on smaller devices.
rightAlignIcon boolean

If true, align the icon to the right hand side of the button.
buttonElement boolean

If true, use a <button> element for the button. This makes the href attribute redundant.
buttonType string

Set the type of button element if buttonElement is true.
classes string

Classes to add to the button.
attributes object

HTML attributes (for example data attributes) to add to the button.

 
{% from "nationalarchives/components/button/macro.njk" import tnaButton %}

{{ tnaButton({
  text: "Button",
  href: "#"
}) }}

Back to top