<div th:fragment="overviewCard(card)" class="col-md-6 col-xl-3 mb-4">
    <div class="card shadow-sm h-100 text-center"
         role="group"
         th:aria-label="${card.heading}">

        <div class="card-body">

            <i class="material-icons fs-3 mb-2 text-muted"
               th:text="${card.icon}"
               aria-hidden="true">
                attach_money
            </i>

            <div class="fw-bold fs-5"
                 th:text="${card.value}">
                $40,000
            </div>

            <div class="text-uppercase fs-7 fw-semibold mt-1"
                 th:classappend="${card.textColour}">
                <span th:text="${card.heading}">Average Earnings</span>
            </div>

            <div class="small text-muted mt-1"
                 th:if="${card.subText}"
                 th:text="${card.subText}">
                Compared to last month
            </div>

        </div>
    </div>
</div>
