FoodLoop-Web/src/app/snippets/cust-snippet-bar.component.html

<div class="row">
  <div class="col-md-6 col-xl-3">
    <div class="card text-center" style="background-color: transparent; border: none">
      <div class="card-block">
        <ul style="list-style: none; padding-left: 0;">
          <li class="hidden-sm-down">
            <div><h5 class="text-dark-green">My Points</h5></div>
            <div class="number-circle mx-auto"><strong>{{ userSum / 10 | number:'1.0-0' }}</strong></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-xl-3">
    <div class="card text-center" style="background-color: transparent; border: none">
      <div class="card-block">
        <ul style="list-style: none; padding-left: 0;">
          <li class="hidden-sm-down">
            <div><h5 class="text-dark-green">My Rank</h5></div>
            <div *ngIf="userPosition == 0" class="statuscontent">
              <div class="number-circle mx-auto"><strong>Unranked</strong></div>
            </div>
            <div *ngIf="userPosition != 0" class="statuscontent">
              <div class="number-circle mx-auto"><strong>{{ userPosition }}</strong></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-xl-3">
    <div class="card text-center" style="background-color: transparent; border: none">
      <div class="card-block">
        <ul style="list-style: none; padding-left: 0;">
          <li class="hidden-sm-down">
            <div><h5 class="text-dark-green">My Total Spend</h5></div>
            <div class="number-circle mx-auto"><strong>{{ userSum | currency:'GBP':'symbol':'1.2-2' }}</strong></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-xl-3">
    <div class="card text-center" style="background-color: transparent; border: none">
      <div class="card-block">
        <ul style="list-style: none; padding-left: 0;">
          <li class="hidden-sm-down">
            <div><h5 class="text-dark-green">Value to Local Economy</h5></div>
            <div class="number-circle mx-auto"><strong>{{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>