Document Head

Page Setup

Put the assets and inline scripts in <head>, and the main bundle just before </body>. The ?ver= query is a cache-busting stamp: change it whenever a bundle changes.


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>

  <!-- Critical CSS — render-blocking, so first paint has the real tokens (no flash). -->
  <link rel="stylesheet" href="assets/css/nds.critical.min.css?ver=1.6.0">

  <!-- Main CSS — deferred; loads the icon sheets once it applies. -->
  <link rel="preload" href="assets/css/nds-main.min.css?ver=1.6.0" as="style"
        onload="this.onload=null;this.rel='stylesheet';window.loadDeferredAssets?loadDeferredAssets():window.__ndsDeferredPending=true">
  <noscript><link rel="stylesheet" href="assets/css/nds-main.min.css?ver=1.6.0"></noscript>
  <noscript><link rel="stylesheet" href="assets/css/nds-icons.min.css?ver=1.6.0"></noscript>
  <noscript><link rel="stylesheet" href="assets/css/hgi-rounded-stroke-min.css?ver=1.6.0"></noscript>

  <!-- Placeholder icon — replace with your own. -->
  <link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg">

  <!-- Inline scripts — theme guard (no light-to-dark flip) + loadDeferredAssets. Copy from the JavaScript tab. -->
  <script>/* theme guard + loadDeferredAssets — see the JavaScript tab */</script>
</head>

<!-- ...page content... then just before </body>: -->
<script defer src="assets/js/nds-main.min.js?ver=1.6.0"></script>


// Apply the saved theme before first paint (no light-to-dark flip).
(function () {
  var v = localStorage.getItem('nds-theme');
  if (v) {
    var d = document.documentElement;
    var t = ((d.getAttribute('data-theme') || '') + ' ' + v).split(/\s+/)
      .filter(function (x, i, a) { return x && a.indexOf(x) === i; });
    d.setAttribute('data-theme', t.join(' '));
  }
})();

// Load the icon sheets after main CSS, so they stay out of the LCP window.
function loadDeferredAssets() {
  var icons = document.createElement('link');
  icons.rel = 'stylesheet';
  icons.href = 'assets/css/nds-icons.min.css?ver=1.6.0';
  icons.onload = function () { document.documentElement.setAttribute('data-nds-icons-loaded', ''); };
  document.head.appendChild(icons);

  var hgi = document.createElement('link');
  hgi.rel = 'stylesheet';
  hgi.href = 'assets/css/hgi-rounded-stroke-min.css?ver=1.6.0';
  document.head.appendChild(hgi);
}
if (window.__ndsDeferredPending) loadDeferredAssets();


/* Optional inline critical gate — paste into an inline <style> in <head>, */
/* then load the critical CSS async (see the note under the tabs). */

/* ── Colors — the FCP skeleton's fills; edit here to re-skin first paint. ── */
html { background-color: var(--background-body, #f9fafb); }
html[data-theme~=dark] { background-color: var(--background-body, #111927); }
:where(.nds-topbar) { background-color: var(--background-topbar, #f3f4f6); }
html[data-theme~=dark] :where(.nds-topbar) { background-color: var(--background-topbar, #111927); }
:where(.nds-main-nav) { background-color: var(--background-nav, #fff); }
html[data-theme~=dark] :where(.nds-main-nav) { background-color: var(--background-nav, #1f2a37); }
:where(.nds-hero-image-wrapper)::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--img-overlay-color, #092a1e) calc(var(--overlay, 0.7) * 100%), transparent); pointer-events: none; }

/* ── Layout reservations + gates (structure) ── */
html :where(header) { display: contents; }
html :where(.nds-topbar) { height: 40px; }
html :where(.nds-main-nav) { height: var(--nds-nav-height, 72px); }
html .nds-swiper.nds-hero:not([data-nds-swiper-initialized]) .nds-swiper-slide:not(:first-child) { display: none; }
:where(.nds-topbar > *, .nds-main-nav > *, .nds-hero-section .nds-section-action, .nds-content-layout, .nds-user-feedback-section, .nds-accessibility-toggle, .nds-footer) { visibility: hidden; }
html:not([data-nds-loaded]) main { overflow-x: clip; }
:root { --nds-icons-opacity: 0; }
i.hgi-stroke { opacity: 0; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:is(.nds-hidden, [hidden], [data-state~=hidden], [data-filtered]) { display: none !important; }
:where(.nds-hero-section) { position: relative; height: 550px; }
:where(.nds-hero-section.nds-sub) { height: auto; min-height: 220px; }
:where(.nds-hero-image-wrapper) { position: absolute; inset: 0; }
:where(.nds-hero-image) { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.nds-hero-section :is(.nds-section-body, .nds-section-wrapper, .nds-breadcrumb-nav)) { visibility: hidden; }

The HTML tab loads critical CSS render-blocking — the simplest setup, and first paint already carries the real tokens so there's no flash. The inline gate is optional. For a non-blocking first paint (better FCP on slow networks), drop the inline <style> gate from the Critical Gate tab into <head> and swap the render-blocking critical <link> for the async version:


<link rel="preload" href="assets/css/nds.critical.min.css?ver=1.6.0" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="assets/css/nds.critical.min.css?ver=1.6.0"></noscript>

The gate hides above-the-fold chrome until styles land, so async loading never flashes.

Asset Files

What each bundle holds and how it loads.

File	Contents	Loading
`nds.critical.min.css`	Tokens, reset, fonts, hero, gate	Render-blocking (or async behind the gate)
`nds-main.min.css`	All component and layout styles	Deferred; gates the page reveal
`nds-icons.min.css`	UI icons (`nds-icon`)	Loaded after main CSS
`hgi-rounded-stroke-min.css`	Content icon font (`hgi hgi-stroke`)	Loaded after main CSS
`nds-main.min.js`	Loader and all component behavior	`<script defer>` before `</body>`

Last Modified Date: 18/07/2026 - 03:05 AM

Document Head - National Design System

Page Setup

Asset Files