Main application structure
Use this template for your main application.
This template is based off the GOV.UK page template guidance.
It includes:
- Design kit javascript and CSS import and initialisation
- The skip link component, Header component, Footer component
- The
govuk-template__body--iai-themeclass to apply the i.AI brand to your application if it is branded i.AI. Read the branding guidance to see when to use the i.AI brand
Page content
Show code
<!DOCTYPE html>
<html lang="en" class="govuk-template">
<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#1d70b8">
<link rel="stylesheet" href="/stylesheets/govuk-frontend.min.css">
<link rel="stylesheet" href="govuk-frontend.min.css" />
<link rel="stylesheet" href="/styles/i-ai-design-system.min.css" />
<link rel="icon" sizes="48x48" href="/assets/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#1d70b8">
<link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/manifest.json">
</head>
<body class="govuk-template__body govuk-template__body--iai-theme">
<script>
document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
</script>
<a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
<header class="govuk-template__header">
<div class="govuk-generic-header">
<div class="govuk-generic-header__container govuk-width-container">
<div class="govuk-generic-header__logo">
<a href="#" class="govuk-generic-header__homepage-link">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="30" viewBox="0 0 995 1053"
aria-lable="i.AI">
<g>
<path
d="M 0.00 0.00 L 995.00 0.00 L 995.00 1053.00 L 0.00 1053.00 ZM 400.78 824.69 L 397.06 835.00 L 485.77 835.00 L 494.93 808.25 C499.97,793.54 505.76,776.66 507.80,770.75 L 511.50 760.00 L 577.41 760.25 L 643.31 760.50 L 669.76 834.50 L 753.38 834.76 L 837.00 835.01 L 837.00 447.00 L 755.01 447.00 L 754.75 629.43 L 754.50 811.86 L 713.12 700.68 C690.37,639.53 659.81,557.44 645.22,518.25 L 618.69 447.00 L 578.60 447.01 L 538.50 447.03 L 471.50 630.70 C434.65,731.72 402.83,819.01 400.78,824.69 ZM 215.00 540.00 L 215.00 838.00 L 297.00 838.00 L 297.00 540.00 ZM 620.00 684.03 C620.00,684.55 539.38,684.69 536.69,684.18 C535.76,684.00 535.00,683.60 535.00,683.28 C535.00,682.07 578.15,551.82 578.45,552.15 C578.80,552.55 620.00,683.31 620.00,684.03 ZM 248.18 527.93 C254.28,529.13 256.98,529.14 263.04,527.99 C288.67,523.13 303.09,497.11 293.87,472.36 C290.82,464.17 279.95,453.28 271.50,449.94 C263.05,446.61 249.02,446.58 240.72,449.87 C227.91,454.96 216.96,469.50 215.47,483.43 C213.26,504.07 227.86,523.93 248.18,527.93 ZM 341.37 836.92 C347.99,838.49 360.72,837.58 367.28,835.05 C379.27,830.45 389.67,817.28 392.03,803.73 C396.69,776.99 372.62,752.63 345.82,756.95 C315.01,761.91 300.84,797.37 319.77,822.12 C324.94,828.88 334.17,835.20 341.37,836.92 Z"
fill="rgb(34,34,34)"></path>
<path
d="M 215.00 689.00 L 215.00 540.00 L 256.00 540.00 L 297.00 540.00 L 297.00 689.00 L 297.00 838.00 L 256.00 838.00 L 215.00 838.00 L 215.00 689.00 ZM 341.37 836.92 C334.17,835.20 324.94,828.88 319.77,822.12 C300.84,797.37 315.01,761.91 345.82,756.95 C372.62,752.63 396.69,776.99 392.03,803.73 C389.67,817.28 379.27,830.45 367.28,835.05 C360.72,837.58 347.99,838.49 341.37,836.92 ZM 400.78 824.69 C402.83,819.01 434.65,731.72 471.50,630.70 L 538.50 447.03 L 578.60 447.01 L 618.69 447.00 L 645.22 518.25 C659.81,557.44 690.37,639.53 713.12,700.68 L 754.50 811.86 L 754.75 629.43 L 755.01 447.00 L 796.00 447.00 L 837.00 447.00 L 837.00 641.01 L 837.00 835.01 L 753.38 834.76 L 669.76 834.50 L 656.53 797.50 L 643.31 760.50 L 577.41 760.25 L 511.50 760.00 L 507.80 770.75 C505.76,776.66 499.97,793.54 494.93,808.25 L 485.77 835.00 L 441.41 835.00 L 397.06 835.00 L 400.78 824.69 ZM 620.00 684.03 C620.00,683.31 578.80,552.55 578.45,552.15 C578.15,551.82 535.00,682.07 535.00,683.28 C535.00,683.60 535.76,684.00 536.69,684.18 C539.38,684.69 620.00,684.55 620.00,684.03 ZM 248.18 527.93 C227.86,523.93 213.26,504.07 215.47,483.43 C216.96,469.50 227.91,454.96 240.72,449.87 C249.02,446.58 263.05,446.61 271.50,449.94 C279.95,453.28 290.82,464.17 293.87,472.36 C303.09,497.11 288.67,523.13 263.04,527.99 C256.98,529.14 254.28,529.13 248.18,527.93 Z"
fill="rgb(254,254,254)"></path>
</g>
</svg> Service name
</a>
</div>
</div>
</div>
</header>
<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<h1 class="govuk-heading-xl">Page content</h1>
</main>
</div>
<footer class="govuk-footer iai-footer">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="govuk-footer__inline-list">
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">Accessibility statement</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">Sitemap</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">Cookies</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">Privacy</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">Contact the team</a>
</li>
</ul>
<div class="govuk-footer__meta-custom">
Built by the <a class="govuk-footer__link" href="https://ai.gov.uk/">Incubator for Artificial
Intelligence</a>
</div>
</div>
<div class="govuk-footer__meta-item"></div>
</div>
</div>
</footer>
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module" src="/javascripts/i-ai-design-system.min.js"></script>
<script type="module">
import {
initAll
} from '/javascripts/govuk-frontend.min.js'
import {
initAllIAIDesignSystem
} from '/javascripts/i-ai-design-system.min.js'
initAll()
initAllIAIDesignSystem()
</script>
</body>
</html>---
import "../styles/idotai.scss";
import {
Header,
Footer,
SkipLink,
} from "@i-dot-ai-npm/component-library-astro";
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>i.AI Starter Kit</title>
</head>
<body class="govuk-template__body govuk-template__body--iai-theme">
<script is:inline>
document.body.className +=
" js-enabled" +
("noModule" in HTMLScriptElement.prototype
? " govuk-frontend-supported"
: "");
</script>
<SkipLink href="#main-content">Skip to main content</SkipLink>
<Header href="/">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="30"
viewBox="0 0 995 1053"
aria-label="i.AI"
>
<g>
<path
d="M 0.00 0.00 L 995.00 0.00 L 995.00 1053.00 L 0.00 1053.00 ZM 400.78 824.69 L 397.06 835.00 L 485.77 835.00 L 494.93 808.25 C499.97,793.54 505.76,776.66 507.80,770.75 L 511.50 760.00 L 577.41 760.25 L 643.31 760.50 L 669.76 834.50 L 753.38 834.76 L 837.00 835.01 L 837.00 447.00 L 755.01 447.00 L 754.75 629.43 L 754.50 811.86 L 713.12 700.68 C690.37,639.53 659.81,557.44 645.22,518.25 L 618.69 447.00 L 578.60 447.01 L 538.50 447.03 L 471.50 630.70 C434.65,731.72 402.83,819.01 400.78,824.69 ZM 215.00 540.00 L 215.00 838.00 L 297.00 838.00 L 297.00 540.00 ZM 620.00 684.03 C620.00,684.55 539.38,684.69 536.69,684.18 C535.76,684.00 535.00,683.60 535.00,683.28 C535.00,682.07 578.15,551.82 578.45,552.15 C578.80,552.55 620.00,683.31 620.00,684.03 ZM 248.18 527.93 C254.28,529.13 256.98,529.14 263.04,527.99 C288.67,523.13 303.09,497.11 293.87,472.36 C290.82,464.17 279.95,453.28 271.50,449.94 C263.05,446.61 249.02,446.58 240.72,449.87 C227.91,454.96 216.96,469.50 215.47,483.43 C213.26,504.07 227.86,523.93 248.18,527.93 ZM 341.37 836.92 C347.99,838.49 360.72,837.58 367.28,835.05 C379.27,830.45 389.67,817.28 392.03,803.73 C396.69,776.99 372.62,752.63 345.82,756.95 C315.01,761.91 300.84,797.37 319.77,822.12 C324.94,828.88 334.17,835.20 341.37,836.92 Z"
fill="rgb(34,34,34)"></path>
<path
d="M 215.00 689.00 L 215.00 540.00 L 256.00 540.00 L 297.00 540.00 L 297.00 689.00 L 297.00 838.00 L 256.00 838.00 L 215.00 838.00 L 215.00 689.00 ZM 341.37 836.92 C334.17,835.20 324.94,828.88 319.77,822.12 C300.84,797.37 315.01,761.91 345.82,756.95 C372.62,752.63 396.69,776.99 392.03,803.73 C389.67,817.28 379.27,830.45 367.28,835.05 C360.72,837.58 347.99,838.49 341.37,836.92 ZM 400.78 824.69 C402.83,819.01 434.65,731.72 471.50,630.70 L 538.50 447.03 L 578.60 447.01 L 618.69 447.00 L 645.22 518.25 C659.81,557.44 690.37,639.53 713.12,700.68 L 754.50 811.86 L 754.75 629.43 L 755.01 447.00 L 796.00 447.00 L 837.00 447.00 L 837.00 641.01 L 837.00 835.01 L 753.38 834.76 L 669.76 834.50 L 656.53 797.50 L 643.31 760.50 L 577.41 760.25 L 511.50 760.00 L 507.80 770.75 C505.76,776.66 499.97,793.54 494.93,808.25 L 485.77 835.00 L 441.41 835.00 L 397.06 835.00 L 400.78 824.69 ZM 620.00 684.03 C620.00,683.31 578.80,552.55 578.45,552.15 C578.15,551.82 535.00,682.07 535.00,683.28 C535.00,683.60 535.76,684.00 536.69,684.18 C539.38,684.69 620.00,684.55 620.00,684.03 ZM 248.18 527.93 C227.86,523.93 213.26,504.07 215.47,483.43 C216.96,469.50 227.91,454.96 240.72,449.87 C249.02,446.58 263.05,446.61 271.50,449.94 C279.95,453.28 290.82,464.17 293.87,472.36 C303.09,497.11 288.67,523.13 263.04,527.99 C256.98,529.14 254.28,529.13 248.18,527.93 Z"
fill="rgb(254,254,254)"></path>
</g>
</svg>
Starter kit
</Header>
<main id="main-content">
<slot />
</main>
<Footer />
<script>
import { initAll } from "govuk-frontend";
import { initAllIAIDesignSystem } from "@i-dot-ai-npm/component-library-frontend";
initAll();
initAllIAIDesignSystem();
</script>
</body>
</html>// Auto-generated - Edits to this file will be merged with a `cruft update`
import type { Metadata } from "next";
import "../styles/idotai.scss";
import { DesignKitInit } from "./DesignKitInit";
import {
Footer,
Header,
SkipLink,
} from "@i-dot-ai-npm/component-library-react";
export const metadata: Metadata = {
title: "Product name",
description: "description here",
icons: {
icon: '/favicon.svg',
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const bodyClassScript = {
__html: `document.body.className += " js-enabled" + ("noModule" in HTMLScriptElement.prototype ? " govuk-frontend-supported" : "");`,
};
return (
<html lang="en">
<body className="govuk-template__body govuk-template__body--iai-theme">
<script dangerouslySetInnerHTML={bodyClassScript} />
<SkipLink href="#main-content">Skip to main content</SkipLink>
<Header href="/">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="30"
viewBox="0 0 995 1053"
aria-label="i.AI"
>
<g>
<path
d="M 0.00 0.00 L 995.00 0.00 L 995.00 1053.00 L 0.00 1053.00 ZM 400.78 824.69 L 397.06 835.00 L 485.77 835.00 L 494.93 808.25 C499.97,793.54 505.76,776.66 507.80,770.75 L 511.50 760.00 L 577.41 760.25 L 643.31 760.50 L 669.76 834.50 L 753.38 834.76 L 837.00 835.01 L 837.00 447.00 L 755.01 447.00 L 754.75 629.43 L 754.50 811.86 L 713.12 700.68 C690.37,639.53 659.81,557.44 645.22,518.25 L 618.69 447.00 L 578.60 447.01 L 538.50 447.03 L 471.50 630.70 C434.65,731.72 402.83,819.01 400.78,824.69 ZM 215.00 540.00 L 215.00 838.00 L 297.00 838.00 L 297.00 540.00 ZM 620.00 684.03 C620.00,684.55 539.38,684.69 536.69,684.18 C535.76,684.00 535.00,683.60 535.00,683.28 C535.00,682.07 578.15,551.82 578.45,552.15 C578.80,552.55 620.00,683.31 620.00,684.03 ZM 248.18 527.93 C254.28,529.13 256.98,529.14 263.04,527.99 C288.67,523.13 303.09,497.11 293.87,472.36 C290.82,464.17 279.95,453.28 271.50,449.94 C263.05,446.61 249.02,446.58 240.72,449.87 C227.91,454.96 216.96,469.50 215.47,483.43 C213.26,504.07 227.86,523.93 248.18,527.93 ZM 341.37 836.92 C347.99,838.49 360.72,837.58 367.28,835.05 C379.27,830.45 389.67,817.28 392.03,803.73 C396.69,776.99 372.62,752.63 345.82,756.95 C315.01,761.91 300.84,797.37 319.77,822.12 C324.94,828.88 334.17,835.20 341.37,836.92 Z"
fill="rgb(34,34,34)"></path>
<path
d="M 215.00 689.00 L 215.00 540.00 L 256.00 540.00 L 297.00 540.00 L 297.00 689.00 L 297.00 838.00 L 256.00 838.00 L 215.00 838.00 L 215.00 689.00 ZM 341.37 836.92 C334.17,835.20 324.94,828.88 319.77,822.12 C300.84,797.37 315.01,761.91 345.82,756.95 C372.62,752.63 396.69,776.99 392.03,803.73 C389.67,817.28 379.27,830.45 367.28,835.05 C360.72,837.58 347.99,838.49 341.37,836.92 ZM 400.78 824.69 C402.83,819.01 434.65,731.72 471.50,630.70 L 538.50 447.03 L 578.60 447.01 L 618.69 447.00 L 645.22 518.25 C659.81,557.44 690.37,639.53 713.12,700.68 L 754.50 811.86 L 754.75 629.43 L 755.01 447.00 L 796.00 447.00 L 837.00 447.00 L 837.00 641.01 L 837.00 835.01 L 753.38 834.76 L 669.76 834.50 L 656.53 797.50 L 643.31 760.50 L 577.41 760.25 L 511.50 760.00 L 507.80 770.75 C505.76,776.66 499.97,793.54 494.93,808.25 L 485.77 835.00 L 441.41 835.00 L 397.06 835.00 L 400.78 824.69 ZM 620.00 684.03 C620.00,683.31 578.80,552.55 578.45,552.15 C578.15,551.82 535.00,682.07 535.00,683.28 C535.00,683.60 535.76,684.00 536.69,684.18 C539.38,684.69 620.00,684.55 620.00,684.03 ZM 248.18 527.93 C227.86,523.93 213.26,504.07 215.47,483.43 C216.96,469.50 227.91,454.96 240.72,449.87 C249.02,446.58 263.05,446.61 271.50,449.94 C279.95,453.28 290.82,464.17 293.87,472.36 C303.09,497.11 288.67,523.13 263.04,527.99 C256.98,529.14 254.28,529.13 248.18,527.93 Z"
fill="rgb(254,254,254)"></path>
</g>
</svg>
Product name
</Header>
<main id="main-content">
{children}
</main>
<Footer />
<DesignKitInit />
</body>
</html>
);
}For react projects you will have to add a DesignKitInit function to your application to initialise the design kit. This is not required for other frameworks.
"use client";
import { useEffect } from "react";
export function DesignKitInit() {
useEffect(() => {
const init = async () => {
const { initAll } = await import("govuk-frontend");
const { initAllIAIDesignSystem } = await import(
"@i-dot-ai-npm/component-library-frontend"
);
initAll();
initAllIAIDesignSystem();
};
init();
}, []);
return null;
}Dealing with "crampt" applications
in accordance with the approach of using the GOV.UK styles and only deviating where needed. It is best to start with this basic template where possible. You should therefore start with the above basic GOV.UK page template.
However, previous products using this template hasve often seen an issue where content feels "squeezed" or "crampt". If you are finding this you can use the following solutions, in order of severity:
If these solutions do not meet your needs, then feel free to create a bespoke solution and contribute your findings back to the Design Kit