@nationalarchives/frontend 0.15.1 → 0.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/config/stylelint.config.js +4 -0
  2. package/nationalarchives/all.css +1 -1
  3. package/nationalarchives/all.css.map +1 -1
  4. package/nationalarchives/components/accordion/accordion.css +1 -1
  5. package/nationalarchives/components/accordion/accordion.css.map +1 -1
  6. package/nationalarchives/components/breadcrumbs/breadcrumbs.css +1 -1
  7. package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
  8. package/nationalarchives/components/button/button.css +1 -1
  9. package/nationalarchives/components/button/button.css.map +1 -1
  10. package/nationalarchives/components/card/card.css +1 -1
  11. package/nationalarchives/components/card/card.css.map +1 -1
  12. package/nationalarchives/components/card/card.scss +16 -1
  13. package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
  14. package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
  15. package/nationalarchives/components/compound-filters/compound-filters.css.map +1 -1
  16. package/nationalarchives/components/cookie-banner/cookie-banner.css.map +1 -1
  17. package/nationalarchives/components/date-input/date-input.css +1 -1
  18. package/nationalarchives/components/date-input/date-input.css.map +1 -1
  19. package/nationalarchives/components/date-search/date-search.css +1 -1
  20. package/nationalarchives/components/date-search/date-search.css.map +1 -1
  21. package/nationalarchives/components/details/details.css +1 -1
  22. package/nationalarchives/components/details/details.css.map +1 -1
  23. package/nationalarchives/components/error-summary/error-summary.css +1 -1
  24. package/nationalarchives/components/error-summary/error-summary.css.map +1 -1
  25. package/nationalarchives/components/files-list/files-list.css.map +1 -1
  26. package/nationalarchives/components/footer/footer.css +1 -1
  27. package/nationalarchives/components/footer/footer.css.map +1 -1
  28. package/nationalarchives/components/gallery/gallery.css +1 -1
  29. package/nationalarchives/components/gallery/gallery.css.map +1 -1
  30. package/nationalarchives/components/gallery/gallery.scss +5 -0
  31. package/nationalarchives/components/global-header/global-header.css +1 -1
  32. package/nationalarchives/components/global-header/global-header.css.map +1 -1
  33. package/nationalarchives/components/header/header.css +1 -1
  34. package/nationalarchives/components/header/header.css.map +1 -1
  35. package/nationalarchives/components/hero/fixtures.json +27 -0
  36. package/nationalarchives/components/hero/hero.css +1 -1
  37. package/nationalarchives/components/hero/hero.css.map +1 -1
  38. package/nationalarchives/components/hero/hero.scss +54 -10
  39. package/nationalarchives/components/hero/template.njk +2 -0
  40. package/nationalarchives/components/index-grid/index-grid.css +1 -1
  41. package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
  42. package/nationalarchives/components/pagination/pagination.css.map +1 -1
  43. package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
  44. package/nationalarchives/components/picture/picture.css.map +1 -1
  45. package/nationalarchives/components/quick-filters/fixtures.json +20 -23
  46. package/nationalarchives/components/quick-filters/macro-options.json +0 -6
  47. package/nationalarchives/components/quick-filters/quick-filters.css +1 -1
  48. package/nationalarchives/components/quick-filters/quick-filters.css.map +1 -1
  49. package/nationalarchives/components/quick-filters/quick-filters.scss +21 -23
  50. package/nationalarchives/components/quick-filters/template.njk +6 -2
  51. package/nationalarchives/components/radios/radios.css +1 -1
  52. package/nationalarchives/components/radios/radios.css.map +1 -1
  53. package/nationalarchives/components/search-field/search-field.css +1 -1
  54. package/nationalarchives/components/search-field/search-field.css.map +1 -1
  55. package/nationalarchives/components/secondary-navigation/secondary-navigation.css +1 -1
  56. package/nationalarchives/components/secondary-navigation/secondary-navigation.css.map +1 -1
  57. package/nationalarchives/components/select/select.css +1 -1
  58. package/nationalarchives/components/select/select.css.map +1 -1
  59. package/nationalarchives/components/sidebar/sidebar.css.map +1 -1
  60. package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
  61. package/nationalarchives/components/tabs/tabs.css +1 -1
  62. package/nationalarchives/components/tabs/tabs.css.map +1 -1
  63. package/nationalarchives/components/text-input/text-input.css +1 -1
  64. package/nationalarchives/components/text-input/text-input.css.map +1 -1
  65. package/nationalarchives/components/text-input/text-input.scss +9 -1
  66. package/nationalarchives/components/textarea/textarea.css +1 -1
  67. package/nationalarchives/components/textarea/textarea.css.map +1 -1
  68. package/nationalarchives/components/warning/warning.css +1 -1
  69. package/nationalarchives/components/warning/warning.css.map +1 -1
  70. package/nationalarchives/components/warning/warning.scss +2 -0
  71. package/nationalarchives/error-page.css +1 -1
  72. package/nationalarchives/error-page.css.map +1 -1
  73. package/nationalarchives/print.css +1 -1
  74. package/nationalarchives/print.css.map +1 -1
  75. package/nationalarchives/prototype-kit.css +1 -1
  76. package/nationalarchives/prototype-kit.css.map +1 -1
  77. package/nationalarchives/templates/fixtures.json +1 -1
  78. package/nationalarchives/templates/layouts/_prototype-kit.njk +1 -1
  79. package/nationalarchives/templates/list.njk +1 -1
  80. package/nationalarchives/templates/templates.stories.js.TEMP +28 -0
  81. package/nationalarchives/tools/_colour.scss +32 -3
  82. package/nationalarchives/tools/_typography.scss +2 -2
  83. package/nationalarchives/utilities/colour/_index.scss +6 -1
  84. package/nationalarchives/utilities/lists/_index.scss +32 -32
  85. package/nationalarchives/utilities/typography/_index.scss +9 -1
  86. package/package.json +5 -5
@@ -39,7 +39,7 @@
39
39
  "name": "list",
40
40
  "template": "list.njk",
41
41
  "options": {},
42
- "html": "<!DOCTYPE html><html lang=\"en\" class=\"tna-template tna-template--blue-accent\"><head><meta charset=\"utf-8\"><title>List page - The National Archives</title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"><meta name=\"theme-color\" content=\"#010101\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><link rel=\"shortcut icon\" sizes=\"16x16 32x32 48x48\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/favicon.ico\" type=\"image/x-icon\"><link rel=\"mask-icon\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/mask-icon.svg\" color=\"#010101\"><link rel=\"apple-touch-icon\" sizes=\"48x48\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-48x48.png\"><link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-72x72.png\"><link rel=\"apple-touch-icon\" sizes=\"96x96\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-96x96.png\"><link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-120x120.png\"><link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-144x144.png\"><link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-152x152.png\"><link rel=\"apple-touch-icon\" sizes=\"167x167\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-167x167.png\"><link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-180x180.png\"><link rel=\"apple-touch-icon\" sizes=\"192x192\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-192x192.png\"><link rel=\"apple-touch-icon\" sizes=\"256x256\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-256x256.png\"><link rel=\"apple-touch-icon\" sizes=\"512x512\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-512x512.png\"><link rel=\"apple-touch-icon\" sizes=\"1024x1024\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-1024x1024.png\"><link rel=\"stylesheet\" href=\"https://use.typekit.net/hkj3kuz.css\"><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400..700&family=Roboto+Mono:wght@400..500&display=swap\"></head><body class=\"tna-template__body\"><a id=\"top\"></a><section class=\"tna-cookie-banner\" data-module=\"tna-cookie-banner\" aria-label=\"Cookies on \" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"#/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"#/cookies\">cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Hide cookies message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"#/cookies\">cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Hide cookies message</button></div></div></div></section><a href=\"#main-content\" class=\"tna-skip-link\" data-module=\"tna-skip-link\">Skip to main content</a><header class=\"tna-header\" data-module=\"tna-header\"><div class=\"tna-container tna-header__contents\"><div class=\"tna-column tna-header__logo-wrapper\"><span class=\"tna-header__logo\"><span class=\"tna-logo tna-logo--adornable\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\" aria-hidden=\"true\" focusable=\"false\"><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></span></span></div></div></header><div class=\"tna-background-accent\"><div class=\"tna-container\"><nav class=\"tna-breadcrumbs tna-column tna-column--full tna-!--padding-vertical-s\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumbs\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"/\" class=\"tna-breadcrumbs__link\">Home</a></li></ol></nav></div></div><main class=\"tna-main\" id=\"main-content\"><div class=\"tna-background-accent tna-!--padding-vertical-xl\"><div class=\"tna-container\"><div class=\"tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny\"><h1 class=\"tna-heading-xl\">List page</h1><p class=\"tna-large-paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></div></div><nav class=\"tna-section\" aria-label=\"Child pages\"><ul class=\"tna-container tna-ul tna-ul--plain\"><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 1</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 2</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 3</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 4</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 5</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 6</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 7</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 8</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 9</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 10</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 11</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 12</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li></ul></nav></main><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\" aria-hidden=\"true\" focusable=\"false\"><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></div></div><div class=\"tna-container\"><div class=\"tna-column--full\"><hr></div></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><script>if (window.TNAFrontend && window.TNAFrontend.initAll) {\n document.addEventListener(\"DOMContentLoaded\", function() {\n window.TNAFrontend.initAll();\n var cookies = new TNAFrontend.Cookies()\n var theme = cookies.get(\"theme\") || \"system\"\n var $tnaTemplate = document.querySelector(\".tna-template\");\n if (theme === \"light\") {\n $tnaTemplate.classList.remove(\n \"tna-template--system-theme\",\n \"tna-template--dark-theme\",\n );\n } else if (theme === \"dark\") {\n $tnaTemplate.classList.remove(\"tna-template--system-theme\");\n $tnaTemplate.classList.add(`tna-template--dark-theme`);\n } else if (theme === \"system\") {\n $tnaTemplate.classList.remove(\"tna-template--dark-theme\");\n $tnaTemplate.classList.add(`tna-template--system-theme`);\n }\n });\n }</script></body></html>"
42
+ "html": "<!DOCTYPE html><html lang=\"en\" class=\"tna-template tna-template--blue-accent\"><head><meta charset=\"utf-8\"><title>List page - The National Archives</title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"><meta name=\"theme-color\" content=\"#010101\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><link rel=\"shortcut icon\" sizes=\"16x16 32x32 48x48\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/favicon.ico\" type=\"image/x-icon\"><link rel=\"mask-icon\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/mask-icon.svg\" color=\"#010101\"><link rel=\"apple-touch-icon\" sizes=\"48x48\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-48x48.png\"><link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-72x72.png\"><link rel=\"apple-touch-icon\" sizes=\"96x96\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-96x96.png\"><link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-120x120.png\"><link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-144x144.png\"><link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-152x152.png\"><link rel=\"apple-touch-icon\" sizes=\"167x167\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-167x167.png\"><link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-180x180.png\"><link rel=\"apple-touch-icon\" sizes=\"192x192\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-192x192.png\"><link rel=\"apple-touch-icon\" sizes=\"256x256\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-256x256.png\"><link rel=\"apple-touch-icon\" sizes=\"512x512\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-512x512.png\"><link rel=\"apple-touch-icon\" sizes=\"1024x1024\" href=\"/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/images/icon-1024x1024.png\"><link rel=\"stylesheet\" href=\"https://use.typekit.net/hkj3kuz.css\"><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400..700&family=Roboto+Mono:wght@400..500&display=swap\"></head><body class=\"tna-template__body\"><a id=\"top\"></a><section class=\"tna-cookie-banner\" data-module=\"tna-cookie-banner\" aria-label=\"Cookies on \" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"#/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"#/cookies\">cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Hide cookies message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"#/cookies\">cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Hide cookies message</button></div></div></div></section><a href=\"#main-content\" class=\"tna-skip-link\" data-module=\"tna-skip-link\">Skip to main content</a><header class=\"tna-header\" data-module=\"tna-header\"><div class=\"tna-container tna-header__contents\"><div class=\"tna-column tna-header__logo-wrapper\"><span class=\"tna-header__logo\"><span class=\"tna-logo tna-logo--adornable\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\" aria-hidden=\"true\" focusable=\"false\"><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></span></span></div></div></header><div class=\"tna-background-accent\"><div class=\"tna-container\"><nav class=\"tna-breadcrumbs tna-column tna-column--full tna-!--padding-vertical-s\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumbs\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"/\" class=\"tna-breadcrumbs__link\">Home</a></li></ol></nav></div></div><main class=\"tna-main\" id=\"main-content\"><div class=\"tna-background-accent tna-!--padding-vertical-xl\"><div class=\"tna-container\"><div class=\"tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny\"><h1 class=\"tna-heading-xl\">List page</h1><p class=\"tna-large-paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></div></div><nav class=\"tna-section\" aria-label=\"Child pages\"><ul class=\"tna-container\"><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 1</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 2</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 3</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 4</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 5</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 6</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 7</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 8</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 9</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 10</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 11</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li><li class=\"tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l\"><article class=\"tna-card\"><h2 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Item 12</a></h2><div class=\"tna-card__body\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p></div></article></li></ul></nav></main><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\" aria-hidden=\"true\" focusable=\"false\"><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></div></div><div class=\"tna-container\"><div class=\"tna-column--full\"><hr></div></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><script>if (window.TNAFrontend && window.TNAFrontend.initAll) {\n document.addEventListener(\"DOMContentLoaded\", function() {\n window.TNAFrontend.initAll();\n var cookies = new TNAFrontend.Cookies()\n var theme = cookies.get(\"theme\") || \"system\"\n var $tnaTemplate = document.querySelector(\".tna-template\");\n if (theme === \"light\") {\n $tnaTemplate.classList.remove(\n \"tna-template--system-theme\",\n \"tna-template--dark-theme\",\n );\n } else if (theme === \"dark\") {\n $tnaTemplate.classList.remove(\"tna-template--system-theme\");\n $tnaTemplate.classList.add(`tna-template--dark-theme`);\n } else if (theme === \"system\") {\n $tnaTemplate.classList.remove(\"tna-template--dark-theme\");\n $tnaTemplate.classList.add(`tna-template--system-theme`);\n }\n });\n }</script></body></html>"
43
43
  },
44
44
  {
45
45
  "name": "index grid",
@@ -1,4 +1,4 @@
1
- {% extends './_generic.njk' %}
1
+ {% extends 'nationalarchives/templates/layouts/_generic.njk' %}
2
2
 
3
3
  {% set assetPath = '/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets/' %}
4
4
 
@@ -35,7 +35,7 @@
35
35
  </div>
36
36
  </div>
37
37
  <nav class="tna-section" aria-label="Child pages">
38
- <ul class="tna-container tna-ul tna-ul--plain">
38
+ <ul class="tna-container">
39
39
  {%- for item in range(0, 12) %}
40
40
  <li class="tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
41
41
  {{ tnaCard({
@@ -0,0 +1,28 @@
1
+ import PlainTemplate from "./plain.njk";
2
+ import ListTemplate from "./list.njk";
3
+ import IndexGridTemplate from "./index-grid.njk";
4
+ import ErrorPageNotFoundTemplate from "./error-page-not-found.njk";
5
+
6
+ export default {
7
+ title: "Templates/Prototype kit",
8
+ };
9
+
10
+ export const Plain = () =>
11
+ PlainTemplate({
12
+ params: {},
13
+ });
14
+
15
+ export const List = () =>
16
+ ListTemplate({
17
+ params: {},
18
+ });
19
+
20
+ export const IndexGrid = () =>
21
+ IndexGridTemplate({
22
+ params: {},
23
+ });
24
+
25
+ export const ErrorPageNotFound = () =>
26
+ ErrorPageNotFoundTemplate({
27
+ params: {},
28
+ });
@@ -7,8 +7,25 @@
7
7
 
8
8
  $base-colours: (
9
9
  "background",
10
+ // "background-tint",
11
+ "font-base",
12
+ "font-dark",
13
+ "font-light",
14
+ "icon-light",
15
+ "link",
16
+ "link-visited",
17
+ // "focus-outline",
10
18
  "keyline",
11
- "keyline-dark" // , "form-error-text", "form-error-border", "focus-outline"
19
+ "keyline-dark",
20
+ // "input-foreground",
21
+ // "input-background",
22
+ // "input-border",
23
+ // "form-error-border",
24
+ // "form-error-text",
25
+ // "button-text",
26
+ // "button-background",
27
+ // "button-hover-text",
28
+ // "button-hover-background",
12
29
  );
13
30
 
14
31
  @function brand-colour($colour, $opacity: 1) {
@@ -264,12 +281,24 @@ $base-colours: (
264
281
  @extend %contrast-on-mobile;
265
282
  }
266
283
 
284
+ %base {
285
+ @each $name, $value in $base-colours {
286
+ --#{$name}: var(--base-#{$value});
287
+ }
288
+
289
+ @include colour-background("background");
290
+
291
+ @include colour-font("font-base");
292
+ }
293
+
294
+ @mixin base {
295
+ @extend %base;
296
+ }
297
+
267
298
  %tint {
268
299
  --background: var(--background-tint);
269
300
 
270
301
  @include colour-background("background");
271
-
272
- // @include colour-font("font-base");
273
302
  }
274
303
 
275
304
  @mixin tint {
@@ -60,14 +60,14 @@
60
60
  }
61
61
 
62
62
  @mixin interactable-text-decoration {
63
- text-underline-offset: typography.$interactable-text-decoration-offset;
64
-
65
63
  text-decoration-thickness: typography.$interactable-text-decoration-thickness;
64
+ text-underline-offset: typography.$interactable-text-decoration-offset;
66
65
  }
67
66
 
68
67
  @mixin interacted-text-decoration {
69
68
  text-decoration: underline;
70
69
  text-decoration-thickness: typography.$interactive-text-decoration-thickness;
70
+ text-underline-offset: typography.$interactable-text-decoration-offset;
71
71
  }
72
72
 
73
73
  @mixin heading-generator(
@@ -48,7 +48,8 @@
48
48
  }
49
49
  }
50
50
 
51
- .tna-background {
51
+ .tna-background,
52
+ .tna-block {
52
53
  &-tint {
53
54
  @include colour.tint;
54
55
  }
@@ -64,6 +65,10 @@
64
65
  &-accent-light {
65
66
  @include colour.accent-light;
66
67
  }
68
+
69
+ &-base {
70
+ @include colour.base;
71
+ }
67
72
  }
68
73
 
69
74
  .tna-border {
@@ -74,7 +74,7 @@ ol {
74
74
 
75
75
  @extend %chip-plain;
76
76
 
77
- dt {
77
+ > dt {
78
78
  position: absolute;
79
79
 
80
80
  font-size: 0;
@@ -106,18 +106,18 @@ ol {
106
106
  }
107
107
 
108
108
  @mixin stacked-dl {
109
- dt,
110
- dd {
109
+ > dt,
110
+ > dd {
111
111
  width: 100%;
112
112
  margin-left: 0;
113
113
  }
114
114
 
115
- dd {
115
+ > dd {
116
116
  padding-left: spacing.space(1);
117
117
  }
118
118
 
119
119
  &.tna-dl--plain {
120
- dt {
120
+ > dt {
121
121
  padding-top: 0;
122
122
  padding-bottom: 0;
123
123
 
@@ -126,20 +126,20 @@ ol {
126
126
  }
127
127
  }
128
128
 
129
- dd {
129
+ > dd {
130
130
  margin-left: 0;
131
131
  padding-top: 0;
132
132
  }
133
133
  }
134
134
 
135
135
  &:not(.tna-dl--plain) {
136
- dt {
136
+ > dt {
137
137
  @include colour.colour-background("background-tint");
138
138
 
139
139
  @include colour.colour-font("font-base");
140
140
  }
141
141
 
142
- dd {
142
+ > dd {
143
143
  margin-left: 0;
144
144
 
145
145
  background: transparent !important;
@@ -147,18 +147,18 @@ ol {
147
147
  }
148
148
 
149
149
  @include colour.on-high-contrast-and-forced-colours {
150
- dd {
150
+ > dd {
151
151
  border-top: none !important;
152
152
  }
153
153
 
154
154
  &.tna-dl--plain {
155
- dt {
155
+ > dt {
156
156
  padding-top: spacing.space(0.5) !important;
157
157
  }
158
158
  }
159
159
 
160
160
  &.tna-dl--icon-padding.tna-dl--plain {
161
- dt {
161
+ > dt {
162
162
  .fa-solid {
163
163
  margin-top: spacing.space(0.5) !important;
164
164
  }
@@ -166,7 +166,7 @@ ol {
166
166
  }
167
167
 
168
168
  &.tna-dl--stacked:not(.tna-dl--plain) {
169
- dt {
169
+ > dt {
170
170
  padding-bottom: 0 !important;
171
171
  }
172
172
  }
@@ -183,8 +183,8 @@ ol {
183
183
  margin-top: 0;
184
184
  }
185
185
 
186
- dt,
187
- dd {
186
+ > dt,
187
+ > dd {
188
188
  margin: 0;
189
189
  padding: spacing.space(0.5) spacing.space(1);
190
190
 
@@ -196,31 +196,31 @@ ol {
196
196
  }
197
197
 
198
198
  &--plain {
199
- dt {
199
+ > dt {
200
200
  padding-top: 0;
201
201
  padding-left: 0;
202
202
  }
203
203
 
204
- dd {
204
+ > dd {
205
205
  padding-top: 0;
206
206
  padding-right: 0;
207
207
  }
208
208
  }
209
209
 
210
210
  &--plain#{&}--spaced {
211
- dt,
212
- dd {
211
+ > dt,
212
+ > dd {
213
213
  padding-bottom: spacing.space(1.25);
214
214
  }
215
215
  }
216
216
 
217
- dt {
217
+ > dt {
218
218
  width: 30%;
219
219
 
220
220
  @include typography.main-font-weight-bold;
221
221
  }
222
222
 
223
- dd {
223
+ > dd {
224
224
  width: 70%;
225
225
 
226
226
  + dd {
@@ -229,7 +229,7 @@ ol {
229
229
  }
230
230
 
231
231
  &--icon-padding {
232
- dt {
232
+ > dt {
233
233
  padding-left: 3rem !important;
234
234
 
235
235
  position: relative;
@@ -250,7 +250,7 @@ ol {
250
250
  }
251
251
 
252
252
  &--icon-padding#{&}--plain {
253
- dt {
253
+ > dt {
254
254
  padding-left: spacing.space(2) !important;
255
255
 
256
256
  .fa-solid {
@@ -259,25 +259,25 @@ ol {
259
259
  }
260
260
  }
261
261
 
262
- dd {
262
+ > dd {
263
263
  padding-left: spacing.space(2);
264
264
  }
265
265
  }
266
266
 
267
267
  &:not(&--plain) {
268
- dt:first-child,
269
- dd:nth-of-type(2n) + dt,
270
- dd:nth-of-type(2n + 1) {
268
+ > dt:first-child,
269
+ > dd:nth-of-type(2n) + dt,
270
+ > dd:nth-of-type(2n + 1) {
271
271
  @include colour.tint;
272
272
  }
273
273
  }
274
274
 
275
275
  @include media.on-small {
276
- dt {
276
+ > dt {
277
277
  width: 35%;
278
278
  }
279
279
 
280
- dd {
280
+ > dd {
281
281
  width: 65%;
282
282
 
283
283
  + dd {
@@ -297,16 +297,16 @@ ol {
297
297
  @include colour.on-high-contrast-and-forced-colours {
298
298
  @include colour.colour-border("keyline-dark", 1px, solid, bottom);
299
299
 
300
- dt,
301
- dd {
300
+ > dt,
301
+ > dd {
302
302
  background: transparent !important;
303
303
 
304
304
  @include colour.colour-border("keyline-dark", 1px, solid, top);
305
305
  }
306
306
 
307
307
  &--plain {
308
- dt,
309
- dd {
308
+ > dt,
309
+ > dd {
310
310
  padding-top: spacing.space(0.5);
311
311
  }
312
312
  }
@@ -91,7 +91,9 @@ small {
91
91
 
92
92
  &:hover,
93
93
  &:focus-visible {
94
- @include typography.interacted-text-decoration;
94
+ text-decoration: underline;
95
+ text-decoration-thickness: 0.1875em;
96
+ text-underline-offset: 0.0625em;
95
97
 
96
98
  .fa-solid {
97
99
  color: inherit;
@@ -114,8 +116,14 @@ small {
114
116
  background-color: transparent;
115
117
 
116
118
  border: none;
119
+ border-radius: 0.1px;
117
120
 
118
121
  @at-root #{selector.unify("a", &)} {
122
+ &:hover,
123
+ &:focus-visible {
124
+ @include typography.interacted-text-decoration;
125
+ }
126
+
119
127
  .fa-solid {
120
128
  color: inherit;
121
129
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nationalarchives/frontend",
3
- "version": "0.15.1",
3
+ "version": "0.16.1",
4
4
  "description": "The National Archives frontend styles",
5
5
  "scripts": {
6
6
  "start": "storybook dev -p 6006",
@@ -57,16 +57,16 @@
57
57
  "@storybook/html": "^8.5.8",
58
58
  "@storybook/html-webpack5": "^8.5.8",
59
59
  "@storybook/test": "^8.5.8",
60
- "@storybook/test-runner": "^0.21.0",
60
+ "@storybook/test-runner": "^0.22.0",
61
61
  "axe-playwright": "^2.0.3",
62
62
  "babel-jest": "^29.7.0",
63
- "babel-loader": "^9.2.1",
63
+ "babel-loader": "^10.0.0",
64
64
  "chromatic": "^11.12.5",
65
- "copy-webpack-plugin": "^12.0.2",
65
+ "copy-webpack-plugin": "^13.0.0",
66
66
  "css-loader": "^7.1.2",
67
67
  "diff": "^7.0.0",
68
68
  "eslint": "^8.57.1",
69
- "eslint-plugin-storybook": "^0.11.1",
69
+ "eslint-plugin-storybook": "^0.12.0",
70
70
  "glob": "^11.0.0",
71
71
  "html-validate": "^9.1.3",
72
72
  "jest-environment-jsdom": "^29.7.0",