Important KPI Widget

<div class="card minheight">
 <!-- Header -->
  <div class="card-header bgm-color1">
    <h2 class="card-title">@String("This is Your Life")</h2>    
  </div>    
 <!-- Body Content --> 
  <div class="card-body">       
    <p>User Country: @User.Country</p>
    <p>An Important Number to Increase:</p>
    <p style="text-align:center"><span class="circle">@User.CommissionsCV</span></p>
  </div>       
  <!-- Footer --> 
  <a class="card-footer--link" href="https://www.directscale.com/">        
    <svg class="card-footer__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
      <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>       
    </svg>        
    <span class="ng-scope">@String("See Inside...")</span>   
  </a>   
</div>

.circle {
    display: inline-block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    border-radius: 30px; /* or 50% */
    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
}

<p style="text-align:center"><span class="circle">@User.CommissionsCV</span></p>