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

        <div class="card-body d-flex align-items-center justify-content-between">
            <!-- Text Content -->
            <div class="me-3">
                <div class="text-uppercase fw-semibold small"
                     th:classappend="${card.textColour}">
                    <span th:text="${card.heading}">
                        Average Earnings (Monthly)
                    </span>
                </div>

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

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

            <!-- Icon -->
            <div class="flex-shrink-0">
                <i class="material-icons fs-2 text-muted"
                   th:text="${card.icon}"
                   aria-hidden="true">
                    attach_money
                </i>
            </div>
        </div>
    </div>
</div>
