❤
npm
Sign UpSign In

@nationalarchives/frontend-global-header

0.2.13 • Public • Published

The National Archives logo

TNA Frontend Global Header and Footer

Latest release NPM version Licence

Use the cookie banner from TNA Frontend in your service.

Preparation

HTML

  1. Add the classes tna-template to your <html> element
  2. Add the class tna-template__body to your <body> element
  3. Add the HTML for the header and footer to the appropriate part of your page (HTML found below)
  4. Change the #main-content in the href of the skip link to the ID of your <main> element

JavaScript and CSS

  1. Include the global-header-package.css file in your page using a <link> element
  2. Include the all.js and analytics.js files in your page using a <script> element (ensure you add the JavaScript file AFTER the header and footer HTML - this should add a TNAFrontend and TNAFrontendAnalytics object to your window)
  3. Initialise the header JavaScript and analytics AFTER the JavaScript files you just included:
<script>
    if(window.TNAFrontend && window.TNAFrontend.initAll) {
        window.TNAFrontend.initAll()
    }
    if(window.TNAFrontendAnalytics && window.TNAFrontendAnalytics.GA4) {
        new TNAFrontendAnalytics.GA4({ addTrackingCode: false })
    }
</script>

Example HTML

Feel free to add or remove items as necessary. The recommended HTML is shown below.

Header

<a href="#main-content" class="tna-skip-link" data-module="tna-skip-link">
  Skip to main content
</a>
<header class="tna-global-header" data-module="tna-global-header">
  <div class="tna-container tna-global-header__main">
    <div class="tna-column tna-column--flex-1 tna-column--order-2">
      <span class="tna-global-header__logo-wrapper">
        <a href="https://www.nationalarchives.gov.uk/" class="tna-global-header__logo tna-global-header__logo--link" title="The National Archives">
          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96">
            <title>The National Archives</title>
            <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background" />
            <g class="tna-logo__foreground" fill="currentColor">
              <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z" />
              <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z" />
            </g>
          </svg>
        </a>
      </span>
    </div>
    <div class="tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper">
      <button class="tna-global-header__navigation-button" type="button" aria-controls="tna-header__navigation tna-header__top-navigation" hidden>
        Menu
        <span class="tna-global-header__hamburger"></span>
      </button>
    </div>
    <nav class="tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper" id="tna-header__navigation" aria-label="Primary">
      <ul class="tna-global-header__navigation">
        <li class="tna-global-header__navigation-item">
          <a href="https://www.nationalarchives.gov.uk/about/visit-us/" class="tna-global-header__navigation-item-link" tabindex="0">Visit</a>
        </li>
        <li class="tna-global-header__navigation-item">
          <a href="https://www.nationalarchives.gov.uk/about/visit-us/whats-on/" class="tna-global-header__navigation-item-link" tabindex="0">What’s on</a>
        </li>
        <li class="tna-global-header__navigation-item">
          <a href="https://beta.nationalarchives.gov.uk/explore-the-collection/" class="tna-global-header__navigation-item-link" tabindex="0">Explore the collection</a>
        </li>
        <li class="tna-global-header__navigation-item">
          <a href="https://www.nationalarchives.gov.uk/help-with-your-research/" class="tna-global-header__navigation-item-link" tabindex="0">Help using the archive</a>
        </li>
        <li class="tna-global-header__navigation-item">
          <a href="https://www.nationalarchives.gov.uk/education/" class="tna-global-header__navigation-item-link" tabindex="0">Education</a>
        </li>
        <li class="tna-global-header__navigation-item">
          <a href="https://www.nationalarchives.gov.uk/professional-guidance-and-services/" class="tna-global-header__navigation-item-link" tabindex="0">Professional guidance and services</a>
        </li>
      </ul>
    </nav>
    <nav class="tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper" id="tna-header__top-navigation" aria-label="Secondary">
      <ul class="tna-global-header__top-navigation">
        <li class="tna-global-header__top-navigation-item">
          <a href="https://www.nationalarchives.gov.uk/search/" class="tna-global-header__top-navigation-link" tabindex="0">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="16"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
            Search
          </a>
        </li>
        <li class="tna-global-header__top-navigation-item">
          <a href="https://shop.nationalarchives.gov.uk/" class="tna-global-header__top-navigation-link" tabindex="0">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="16"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 112c0-35.3 28.7-64 64-64s64 28.7 64 64v48H160V112zm-48 48H48c-26.5 0-48 21.5-48 48V416c0 53 43 96 96 96H352c53 0 96-43 96-96V208c0-26.5-21.5-48-48-48H336V112C336 50.1 285.9 0 224 0S112 50.1 112 112v48zm24 48a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm152 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/></svg>
            Shop
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Footer

<footer class="tna-footer" data-module="tna-footer">
  <div class="tna-footer__inner">
    <div class="tna-container">
      <div class="tna-column tna-column--flex-1 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-1">
        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96">
          <title>The National Archives</title>
          <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background" />
          <g class="tna-logo__foreground" fill="currentColor">
            <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z" />
            <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z" />
          </g>
        </svg>
        <h2 class="tna-heading-m tna-footer__title">The National Archives</h2>
        <address class="tna-footer__address">
          Kew, Richmond<br>
          TW9 4DU
        </address>
          <h3 class="tna-!--visually-hidden">
            Follow us
          </h3>
          <nav class="tna-footer__social" aria-label="Social">
            <ul class="tna-ul tna-ul--plain tna-footer__social-items">
              <li class="tna-footer__social-item">
                <a href="https://twitter.com/UKNatArchives" class="tna-footer__social-item-link" data-name="twitter">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
                  <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
                    The National Archives X feed (formally known as Twitter)
                  </span>
                </a>
              </li>
              <li class="tna-footer__social-item">
                <a href="https://www.youtube.com/c/TheNationalArchivesUK" class="tna-footer__social-item-link" data-name="youtube">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg>
                  <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
                    The National Archives YouTube channel
                  </span>
                </a>
              </li>
              <li class="tna-footer__social-item">
                <a href="https://www.facebook.com/TheNationalArchives" class="tna-footer__social-item-link" data-name="facebook">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg>
                  <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
                    The National Archives Facebook page
                  </span>
                </a>
              </li>
              <li class="tna-footer__social-item">
                <a href="https://www.flickr.com/photos/nationalarchives" class="tna-footer__social-item-link" data-name="flickr">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"/></svg>
                  <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
                    The National Archives Flickr feed
                  </span>
                </a>
              </li>
              <li class="tna-footer__social-item">
                <a href="https://www.instagram.com/nationalarchivesuk/" class="tna-footer__social-item-link" data-name="instagram">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
                  <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
                    The National Archives Instagram feed
                  </span>
                </a>
              </li>
              <li class="tna-footer__social-item">
                <a href="https://www.tiktok.com/@uknatarchives" class="tna-footer__social-item-link" data-name="tiktok">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/></svg>
                  <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
                    The National Archives TikTok feed
                  </span>
                </a>
              </li>
            </ul>
          </nav>
      </div>
      <div class="tna-footer__navigation tna-column tna-column--width-1-2 tna-column--full-medium tna-column--full-small tna-column--full-tiny tna-column--order-2 tna-column--order-4-medium tna-columns tna-columns--2 tna-columns--1-tiny">
        <nav class="tna-footer__navigation-block tna-columns__block" aria-label="Quick links">
          <h3 class="tna-footer__navigation-block-heading tna-heading-m">
            Quick links
          </h3>
          <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.nationalarchives.gov.uk/about/" class="tna-footer__navigation-block-item-link">
                About us
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.nationalarchives.gov.uk/contact-us/" class="tna-footer__navigation-block-item-link">
                Contact us
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.nationalarchives.gov.uk/about/news/" class="tna-footer__navigation-block-item-link">
                News
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://blog.nationalarchives.gov.uk/" class="tna-footer__navigation-block-item-link">
                Blog
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://media.nationalarchives.gov.uk/index.php/category/podcasts-2/" class="tna-footer__navigation-block-item-link">
                Podcasts
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://images.nationalarchives.gov.uk/" class="tna-footer__navigation-block-item-link">
                Image library
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.nationalarchives.gov.uk/about/press-room/" class="tna-footer__navigation-block-item-link">
                Press room
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.nationalarchives.gov.uk/about/jobs/" class="tna-footer__navigation-block-item-link">
                Jobs
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.nationalarchives.gov.uk/contact-us/british-citizenship-services/" class="tna-footer__navigation-block-item-link">
                British citizenship services
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.nationalarchives.gov.uk/archives-sector/our-archives-sector-role/historical-manuscripts-commission/" class="tna-footer__navigation-block-item-link">
                Historical Manuscripts Commission
              </a>
            </li>
          </ul>
        </nav>
        <nav class="tna-footer__navigation-block tna-columns__block" aria-label="Other websites">
          <h3 class="tna-footer__navigation-block-heading tna-heading-m">
            Other websites
          </h3>
          <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.nationalarchives.gov.uk/webarchive/" class="tna-footer__navigation-block-item-link">
                UK Government Web Archive
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.legislation.gov.uk/" class="tna-footer__navigation-block-item-link">
                Legislation.gov.uk
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://caselaw.nationalarchives.gov.uk/" class="tna-footer__navigation-block-item-link">
                Find case law
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.thegazette.co.uk/" class="tna-footer__navigation-block-item-link">
                The Gazette
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.nationalarchivestrust.org.uk/" class="tna-footer__navigation-block-item-link">
                The National Archives Trust
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://ftna.org.uk/" class="tna-footer__navigation-block-item-link">
                Friends of The National Archives
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-3">
        <div class="tna-footer__mailing-list">
          <h3 class="tna-footer__navigation-block-heading tna-heading-m">
            Sign up to our emails
          </h3>
          <p>
            Hear about our latest news, stories from the collection and priority booking for events.
          </p>
          <div class="tna-button-group">
            <a href="https://pages.enews.nationalarchives.gov.uk/pages/subscribe" class="tna-button">
            Subscribe
          </a>
          </div>
        </div>
      </div>
    </div>
    <div class="tna-container">
      <nav class="tna-footer__legal tna-column tna-column--full" aria-label="Legal">
        <ul class="tna-footer__legal-items tna-ul tna-ul--plain">
          <li class="tna-footer__legal-item">
            <a href="#/accessibility" class="tna-footer__legal-item-link">
              Accessibility statement
            </a>
          </li>
          <li class="tna-footer__legal-item">
            <a href="#/freedom-of-information" class="tna-footer__legal-item-link">
              Freedom of information
            </a>
          </li>
          <li class="tna-footer__legal-item">
            <a href="#/terms-and-conditions" class="tna-footer__legal-item-link">
              Terms and conditions
            </a>
          </li>
          <li class="tna-footer__legal-item">
            <a href="#/privacy" class="tna-footer__legal-item-link">
              Privacy policy
            </a>
          </li>
          <li class="tna-footer__legal-item">
            <a href="#/cookies" class="tna-footer__legal-item-link">
              Cookies
            </a>
          </li>
        </ul>
        <hr>
      </nav>
    </div>
    <div class="tna-container tna-footer__licence">
      <div class="tna-column tna-column--full-tiny">
        <svg class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 483.2 195.7" width="60" height="24">
          <title>Open Government Licence</title>
          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
        </svg>
      </div>
      <div class="tna-column tna-column--flex-1">
        <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" class="tna-footer__link">Open Government Licence v3.0</a>, except where otherwise stated</p>
      </div>
      <div class="tna-column tna-column--full-small tna-column--full-tiny tna-footer__govuk">
        <a href="https://www.gov.uk/" class="tna-footer__govuk-link">
          <svg aria-hidden="true" class="tna-footer__govuk-logotype-crown" width="32" height="30" focusable="false" viewBox="0 0 32 30" xmlns="http://www.w3.org/2000/svg">
            <title>GOV.UK</title>
            <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8" fill="currentColor" fill-rule="evenodd" />
          </svg>
          GOV.UK
        </a>
      </div>
    </div>
  </div>
</footer>

Dependents (0)

Package Sidebar

Install

npm i @nationalarchives/frontend-global-header

Repository

github.com/nationalarchives/tna-frontend

Homepage

github.com/nationalarchives/tna-frontend/wiki/Cookies

Weekly Downloads

21

Version

0.2.13

License

MIT

Unpacked Size

402 kB

Total Files

9

Last publish

Collaborators

  • tnawebmaster
  • ahosgood
  • sampalmer
  • tna-digital
  • tomjking
Try on RunKit
Report malware