SendGrid style-guide pie chart

pie-chart.html

<div class="card is-centered pie-chart-card">
  <span class="badge mantis">Good</span>
  <div class="pie-chart">
    <div class="pie-chart-svg">
      <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
        <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
        <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#9e9e9e" stroke-width="2"></circle>
        <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#18c96e" stroke-width="2" stroke-dasharray="60 40" stroke-dashoffset="0"></circle>
        <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b71c1c" stroke-width="2" stroke-dasharray="20 80" stroke-dashoffset="45"></circle>
        <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#9e9e9e" stroke-width="2" stroke-dasharray="25 75" stroke-dashoffset="25"></circle>
      </svg>
      <span class="pie-chart-number is-size-h2">64%</span>
    </div>
    <ul class="pie-chart-legend">
      <li>
        <span class="label label-delivered">45% passed</span>
      </li>
      <li>
        <span class="label label-error">12% failed</span>
      </li>
      <li>
        <span class="label label-draft">6% not received</span>
      </li>
    </ul>
  </div>
  <span class="has-underline is-size-h2" data-tooltip="Tooltip down!" data-tooltip-pos="down">Overall Deliverability</span>
</div>