Header
- Standard
Default
Add the product name and the i.AI logo to the header.
Show code
<div class="govuk-generic-header">
<div class="govuk-generic-header__container govuk-width-container">
<div class="govuk-generic-header__logo">
<a class="govuk-generic-header__homepage-link" 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
</a>
</div>
</div>
</div>---
import { Header } from "@i-dot-ai-npm/component-library-astro";
---
<Header>
<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>import { Header } from "@i-dot-ai-npm/component-library-react";
export default function Example() {
return (
<Header>
<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>
);
}<script>
import { Header } from "@i-dot-ai-npm/component-library-svelte";
</script>
<Header>
<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>import { Header } from "@i-dot-ai-npm/component-library-solid";
export default function Example() {
return (
<Header>
<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>
);
}When to use this component
Use this header when building a product that is for i.AI or another department in government.
This header is the default. An experimental product, or one whose audience is not yet settled, starts with this header and can switch to the GOV.UK header later.
When not to use this component
Do not use the generic header for a public-facing or cross-government service. Use the GOV.UK header instead so the product reads as GOV.UK.