<div class="harvey-ball-legend">
  <div class="font-size-14">Warning</div>
  <svg class="ms-3 me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
    <use class="harvey-ball harvey-ball--warning" xlink:href="#warning-harvey-ball"></use>
  </svg>
  <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
    <use class="harvey-ball harvey-ball--watch" xlink:href="#watch-harvey-ball"></use>
  </svg>
  <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
    <use class="harvey-ball harvey-ball--growth" xlink:href="#growth-harvey-ball"></use>
  </svg>
  <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
    <use class="harvey-ball harvey-ball--approval" xlink:href="#approval-harvey-ball"></use>
  </svg>
  <svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
    <use class="harvey-ball harvey-ball--ideal" xlink:href="#ideal-harvey-ball"></use>
  </svg>
  <div class="font-size-14">Ideal</div>
</div>
