Skip to main content Skip to list of styles
Service phase: Beta

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

Styles

Templates

Use the provided templates to create consistent layouts.

Contents

  1. Base page template
  2. Emails

Base page template

A template is included in TNA Frontend that has support for the blocks specified below.

You can use this template in your prototypes or copy the structure into your production application.

See the generic page template in TNA Frontend.

Blocks

The default blocks available on the base template
Block Purpose
pageTitle Explictly writes to the <title> element
headIcons Contains favicon and apple-touch-icon icons
head Empty block for the addition of other contents in the <head>
stylesheets Block for including stylesheets
bodyStart Contains the top-of-page elements cookies and skipLink
cookies Contains the tnaCookieBanner component
skipLink Contains the tnaSkipLink element
header Block for the site’s header component (e.g. tnaHeader)
main Contains the main body of content along with the <main> element
beforeContent Can be used for pre-main elements such as breadcrumbs
content The main body of content
afterContent Can be used for post-main elements such as page feedback
footer Block for the site’s footer component (e.g. tnaFooter)
bodyEnd Contains code that needs to be included at the end of the page (e.g. JavaScript)

The blocks are nested in the following way:

Page variables

The default variables available in the base template
Variable Purpose Default
htmlLang Sets the lang attribute of the <html> element en
htmlClasses Classes to add to the <html> element [none]
pageTitle Sets the title of the page in the <title> element, before the siteTitle [none]
siteTitle Sets the title of the page in the <title> element, after the pageTitle The National Archives
theme Sets the theme colour of the site system
themeAccent Sets the accent colour of the site [none]
themeColor The theme-color #010101
assetPath The path for the icons and images included from TNA Frontend /assets
bodyClasses Classes to add to the <body> element [none]
mainClasses Classes to add to the <main> element [none]

CSS classes

There are two template classes that need to be present in order to correctly apply a page layout:

Emails

An email template is included in TNA Frontend (Jinja template: layouts/email.html).

Emails sent through AWS should be sent from *@nationalarchives.gov.uk to ensure they pass all the security requirements that have been set up (SPF/DKIM/DMARC).

Template variables

In production, you should pass these variables into your template rendering function rather than setting them inside the template like the example above.

The variables available in the email template
Variable Purpose
subject (Required) The subject of the email, added to the <title> element
panel An optional panel component
content The main body of the email
cta_buttons An optional array of button components
signoff A final piece of content at the end of the email

Email example

Open this example in new tab

Nunjucks

Nunjucks options 
{%- set subject = "Your application has been received" -%}
{%- set panel = {
  title: "Application received",
  headingLevel: 1,
  headingSize: "l",
  body: "<p>Your reference number is <strong>0123456789</strong>.</p>"
} -%}
{%- set content = "<p>You will receive a response from us about your application within 10 working days.</p>" -%}
{%- set signoff = "<p>If you have any questions regarding your enquiry, please email us at <a href=\"#\">enquiry@nationalarchives.gov.uk</a> or call <a href=\"#\">+44 (0) 20 8876 3444</a>, quoting your reference number.</p>" -%}

{%- include "nationalarchives/templates/layouts/email.njk" -%}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{%- set subject = "Your application has been received" -%}
{%- set panel = {
  "title": "Application received",
  "headingLevel": 1,
  "headingSize": "l",
  "body": "<p>Your reference number is <strong>0123456789</strong>.</p>"
} -%}
{%- set content = "<p>You will receive a response from us about your application within 10 working days.</p>" -%}
{%- set signoff = "<p>If you have any questions regarding your enquiry, please email us at <a href=\"#\">enquiry@nationalarchives.gov.uk</a> or call <a href=\"#\">+44 (0) 20 8876 3444</a>, quoting your reference number.</p>" -%}

{%- include "layouts/email.html" -%}

Back to top