DFE-Digital/govuk-components

View on GitHub
guide/content/assets/homepage-illustration.svg

Summary

Maintainability
Test Coverage
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="500">
  <defs>
    <path id="a" d="M0 0h200v109h-81a8 8 0 0 0-8 8v43H0V0Z"/>
  </defs>
  <path fill="#FFF" fill-opacity=".3" fill-rule="nonzero" d="M277 58.5c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm0 14c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm0 14c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm0 14c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm0 14c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm0 14c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm0 14c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm0 14c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm0 14c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm0 14c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm0 14c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5Zm14-140c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5 2 0 3.5 1.6 3.5 3.5Zm14 0c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5 2 0 3.5 1.6 3.5 3.5Zm14 0c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5 2 0 3.5 1.6 3.5 3.5Zm14 0c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5 2 0 3.5 1.6 3.5 3.5Zm14 0c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5 2 0 3.5 1.6 3.5 3.5Zm14 0c0 1.9-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5c0-1.9 1.6-3.5 3.5-3.5 2 0 3.5 1.6 3.5 3.5Zm208 310c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm0-14c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5Zm-14 210c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5c-2 0-3.5-1.6-3.5-3.5Zm-14 0c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5c-2 0-3.5-1.6-3.5-3.5Zm-14 0c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5c-2 0-3.5-1.6-3.5-3.5Zm-14 0c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5c-2 0-3.5-1.6-3.5-3.5Zm-14 0c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5c-2 0-3.5-1.6-3.5-3.5Zm-14 0c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5c-2 0-3.5-1.6-3.5-3.5Z"/>
  <g transform="translate(20 90)">
    <mask id="b" fill="#fff">
      <use xlink:href="#a"/>
    </mask>
    <use xlink:href="#a" fill="#000" fill-rule="nonzero"/>
    <g fill-rule="nonzero" mask="url(#b)">
      <path fill="#323232" stroke="#0B0C0C" stroke-width="6" d="M197 3v154H3V3h194Z"/>
      <path fill="#B1B4B6" d="M43.6 30 23.3 18.4c-.4-.2-.8-.4-1.2-.4a2 2 0 0 0-2 2c0 .9.5 1.6 1.3 2l15.8 9-16 9.1a2 2 0 0 0-1.2 2c0 1 .9 1.9 2 1.9.4 0 .9-.2 1.2-.4l20.3-11.7c.5-.3.6-1 .4-1.5 0-.2-.2-.3-.3-.4Zm30.8 24.5c-.5-.4-1.1-.6-1.7-.5H47.2c-.6 0-1.2.1-1.6.5-.8.7-.8 2 0 2.9.5.5 1 .7 1.6.6h25.5c.6 0 1.2-.1 1.7-.5a2 2 0 0 0 0-3Z"/>
    </g>
  </g>
  <path fill="#FFF" d="M138 206h340v230H138z" opacity=".3"/>
  <path fill="#1E1E1E" fill-rule="nonzero" d="M476.4 198.5c5.6 0 9.1 3.8 9.1 9.8v238.2h-355V208.3c0-6 3.5-9.8 9-9.8h337ZM280 206H142a4 4 0 0 0-4 4v226h340V210a4 4 0 0 0-4-4H336v6a3 3 0 0 1-3 3h-50a3 3 0 0 1-3-3v-6Z"/>
  <path fill="#EDEDED" fill-rule="nonzero" d="M486 446h-1V207.5c0-5-3.5-8.5-8.5-8.5h-337c-5 0-8.5 3.5-8.5 8.5V446h-1V207.5c0-5.5 4-9.5 9.5-9.5h337c5.5 0 9.5 4 9.5 9.5V446Z"/>
  <path fill="#808283" fill-rule="nonzero" d="M269 446h78v7h-78z"/>
  <path fill="#B1B4B6" fill-rule="nonzero" d="M339.5 452.5H276c-5 0-6.5-3-6.5-6.5H80v10a8 8 0 0 0 8 8h440a8 8 0 0 0 8-8v-10H346.5c0 4-2 6.5-7 6.5Z"/>
  <path fill="none" stroke="#EDEDED" d="M536 446.5H346.5c0 4-2.5 6-6.5 6h-64c-4 0-6.5-2-6.5-6H80"/>
  <path fill="#A5A9AB" fill-rule="nonzero" d="M80 456v.1a8 8 0 0 0 8 7.9h440a7.9 7.9 0 0 0 7.9-8 8.5 8.5 0 0 1-5.5 2H86c-2.1 0-4.2-.7-5.9-2Z"/>
  <path fill="#000" fill-opacity=".5" fill-rule="nonzero" d="M105 466h406l20 4H85z"/>
  <path fill="#505A5F" fill-rule="nonzero" d="m107.4 464 5.7 3h38.6l5.7-3zm352 0 5.7 3h38.6l5.7-3z"/>
  <path fill="#FFF" fill-rule="nonzero" stroke="#0B0C0C" stroke-width="2" d="M179 240h258v168H179z"/>
  <path fill="#B1B4B6" d="M196 282h142v9H196z"/>
  <path fill="#F3F2F1" fill-rule="nonzero" d="M196 375h79v20h-79v-20Zm0-74h120v64H196v-64Zm-16-60h256v28H180v-28Z"/>
  <path fill="#0B0C0C" fill-rule="nonzero" d="M148 230h258v28H148z"/>
  <text fill="#FFF" font-family="system-ui, sans-serif" font-size="16" font-weight="300" transform="translate(148 230)">
    <tspan x="17" y="20">Service</tspan>
  </text>
  <path fill="#FFF" d="M360 0h240v160H360z"/>
  <path fill="#505A5F" fill-rule="nonzero" d="M397 86h136v9H397zm0 19h156v9H397zm0 19h156v9H397z"/>
  <path fill="#1D70B8" fill-rule="nonzero" d="M398 19h148v9H398z"/>
  <path fill="#F3F2F1" d="M397 52h62v21h-62z"/>
  <path fill="#B2B4B6" d="M376 40h5v105h-5z"/>
  <path fill="#1D70B8" d="M376 16h14l-7 12z"/>
  <path fill="#BFE3E0" d="M420 42h62v21h-62z"/>
  <path fill="#11403B" d="M426 48h40v9h-40z"/>
  <path fill="#000" fill-opacity=".3" fill-rule="nonzero" d="M75.4 496h25.2l3.4 4H72z"/>
  <path fill="#ED3B1F" d="m36 374 24 36H12z"/>
  <path fill="#F86A54" d="M36 374h52l-28 36z"/>
  <path fill="#ED3B1F" d="M88 374h52l-24 36z"/>
  <path fill="#99220F" d="m88 374 28 36H60z"/>
  <path fill="#801C0D" d="m88 498 76-88h-48z"/>
  <path fill="#F86A54" d="m88 498-28-88H12z"/>
  <path fill="#CC3F29" d="m88 498 28-88H60zm52-124 24 36h-48z"/>
</svg>