<div class="o-card o-card--complete-profile">
  <h3 class="o-card--complete-profile__hed">
    <a href="#" class="o-card--complete-profile__link">
      {{user}}
    </a>
  </h3>
  <p class="o-card--complete-profile__text">
    Your profile helps us give you a better experience. Complete your profile to take advantage of all your member benefits.
  </p>
  <div class="o-member-feature-complete-profile__button">
    {{> button anchorButton=true buttonText="Complete profile" buttonModifierClasses="c-button--dark-secondary"}}
  </div>
  <figure class="o-card--complete-profile__chart">
    {{> donut-chart bgColor="#fff" baseColor="#ccc" chartColor="#a45037" stroke="8" percent=percent remainder=remainder }}

    <figcaption class="figure-key">
      <p class="u-visually-hidden">Donut chart showing percent of completed profile.</p>
      <p class="o-card--complete-profile__chart__text">{{percent}}% complete</p>
    </figcaption>
  </figure>
</div>
