Graphical Elements

These graphical elements are for use within homepage patterns only and should be used as specified in the homepage patterns section.

Accessibility Considerations

Be sure to use the colors specified in the color palette section for any content overlaid on graphical elements to ensure accessible contrast ratio.

Usage

• A graphical element must be included in all size variations of homepage patterns created within this design system.
• Homepages are the only pages that should include graphical elements within this design system.

Code Examples

<!-- Desktop Graphical Element -->
<svg xmlns="http://www.w3.org/2000/svg" width="2643.024" height="1256.154" viewBox="0 0 2643.024 1256.154">
  <g id="Header_Graphic" transform="translate(0.524 0.5)">
    <path id="Header_Graphic_Desktop" d="M-27.394,2157.894s-5.4,401.308,195.344,479.42,353.49-20.133,380.5-34.127,140.158-74.714,300.093,62.126,516.532-66.531,552.046-77.016,233.515-98.058,505.553,196,708.449,189.964,708.449,189.964V1737.031H-27.394Z" transform="translate(27.409 -1737.031)" fill="#2d3d74" stroke="#707070" stroke-width="1"/>
  </g>
</svg>
<!-- Tablet Graphical Element -->
<svg xmlns="http://www.w3.org/2000/svg" width="841.008" height="551.023" viewBox="0 0 841.008 551.023">
  <g id="Header_Graphic_Tablet" transform="translate(0.508 0.5)">
    <path id="Path_104" data-name="Path 104" d="M-27.4,1921.457S-29.12,2097.313,34.7,2131.542s112.389-8.823,120.977-14.955,44.562-32.74,95.412,27.224,164.227-29.155,175.518-33.749,74.244-42.97,160.736,85.888,225.245,83.243,225.245,83.243V1737.031h-840Z" transform="translate(27.409 -1737.031)" fill="#2d3d74" stroke="#707070" stroke-width="1"/>
  </g>
</svg>
<!-- Mobile Graphical Element -->
<svg id="Header_Graphic_Mobile" xmlns="http://www.w3.org/2000/svg" width="433.195" height="654.688" viewBox="0 0 433.195 654.688">
  <path id="Header_Graphic_Mobile-2" data-name="Header_Graphic_Mobile" d="M7004.375-1128.687v491.3s102.018,7.006,158.914-8.165S7247.1-649.2,7247.1-649.2s58.2,8.18,82.216,87.732S7437.57-474,7437.57-474v-654.687Z" transform="translate(-7004.375 1128.688)" fill="#2d3d74"/>
</svg>