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

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

Components

Panel

Use the panel component to show the sucessful end status of a form or user journey.

Contents

  1. Component status
Open this example in new tab

HTML 

<div class="tna-panel">
  <h1 class="tna-heading-xl tna-panel__heading">
    Application received
  </h1>
  <div class="tna-panel__content">
    <p>Your application has been received and is being processed.</p>
    <p>Your reference number is <strong>123456</strong>.</p>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
title string

Required.

The main title of the panel.
headingLevel number

The heading level which represents an element from <h1> through to <h6>.

Default value: 1
headingSize string

The physical size of the panel title (xl, l, m or s).

Default value: m
body string

The HTML for the main body of the panel. Not displayed if text is set.
text string

The text for the panel which will be inserted into a <p> element. Overwrites body if it is set.
classes string

Classes to add to the panel.
attributes object

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

 
{% from "nationalarchives/components/panel/macro.njk" import tnaPanel %}

{{ tnaPanel({
  title: "Application received",
  body: "<p>Your application has been received and is being processed.</p><p>Your reference number is <strong>123456</strong>.</p>",
  headingLevel: 1
}) }}

Component status

Phase
To be reviewed
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Documentation complete
No

Back to top