Components

Panel

The panel component is a visible container used on confirmation or results pages to highlight important content.

<div class="app-example app-example--tabs">
  <div class="app-example__toolbar">
    <a href="/components/panel/default/index.html" class="app-example__new-window" target="_blank">
      Open this
      <span class="govuk-visually-hidden">panel</span>
      example in a new tab
    </a>
  </div>
  <iframe title="Panel example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/panel/default/index.html" frameBorder="0" loading="lazy"></iframe>
</div>

<span id="options-panel-example"></span>
<ul class="app-tabs" role="tablist">
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#panel-example-html" role="tab" aria-controls="panel-example-html" data-track="tab-html">HTML</a></li>
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#panel-example-nunjucks" role="tab" aria-controls="panel-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>

  <div class="app-tabs__heading js-tabs__heading"><a href="#panel-example-html" aria-controls="panel-example-html" data-track="tab-html">HTML</a></div>

<div class="app-tabs__container js-tabs__container" id="panel-example-html" role="tabpanel">
  <div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-panel govuk-panel--confirmation&quot;</span>&gt;</span>

<h1 class="govuk-panel__title"> Application complete </h1> <div class="govuk-panel__body"> Your reference number<br><strong>HDJ2123F</strong> </div> </div>

  <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#panel-example-nunjucks" aria-controls="panel-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="panel-example-nunjucks" role="tabpanel">
    

    <details class="govuk-details app-options" data-module="govuk-details" id="options-panel-example-details">

Nunjucks macro options

      <p>
      Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
      </p>
      <p>
      Some options are required for the macro to work; these are marked as "Required" in the option description.
      </p>
      <p>
      If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against  <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
      </p>
      
        <table class="govuk-table app-options__table" id="options-panel-example--primary">
          <caption class="govuk-table__caption govuk-heading-m  govuk-visually-hidden">Primary options</caption>
          <thead class="govuk-table__head">
            <tr class="govuk-table__row">
              <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
              <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
              <th class="govuk-table__header" scope="col">Description</th>
            </tr>
          </thead>
          <tbody class="govuk-table__body">
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">titleText</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                    <strong>Required.</strong>
                  
                  If <code>titleHtml</code> is set, this is not required. Text to use within the panel. If <code>titleHtml</code> is provided, the <code>titleText</code> option will be ignored.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">titleHtml</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                    <strong>Required.</strong>
                  
                  If <code>titleText</code> is set, this is not required. HTML to use within the panel. If <code>titleHtml</code> is provided, the <code>titleText</code> option will be ignored.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">headingLevel</th>
                <td class="govuk-table__cell ">integer</td>
                <td class="govuk-table__cell ">
                  
                  Heading level, from <code>1</code> to <code>6</code>. Default is <code>1</code>.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">text</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                    <strong>Required.</strong>
                  
                  If <code>html</code> is set, this is not required. Text to use within the panel content. If <code>html</code> is provided, the <code>text</code> option will be ignored.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">html</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                    <strong>Required.</strong>
                  
                  If <code>text</code> is set, this is not required. HTML to use within the panel content. If <code>html</code> is provided, the <code>text</code> option will be ignored.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">caller</th>
                <td class="govuk-table__cell ">nunjucks-block</td>
                <td class="govuk-table__cell ">
                  
                  Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a <code>call</code> block.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">classes</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                  Classes to add to the panel container.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">attributes</th>
                <td class="govuk-table__cell ">object</td>
                <td class="govuk-table__cell ">
                  
                  HTML attributes (for example data attributes) to add to the panel container.
                  
                  </td>
              </tr>
            
          </tbody>
        </table>

  <div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/panel/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPanel %}

{{ govukPanel({ titleText: "Application complete", html: "Your reference number<br><strong>HDJ2123F</strong>" }) }}