Stat Counter
แสดงตัวเลขสถิติสำคัญ พร้อม animation นับ
Grid
พื้นหลังขาว เหมาะกับสถิติทั่วไป
Previewstat-counter-grid
<section class="stk-stats stk-section" data-aos="fade-up"> <div class="container"> <h2 class="stk-heading text-center mb-5">ข้อมูลสำคัญ</h2> <div class="row g-4"> <div class="col-6 col-md-3"> <div class="stk-stat"> <div class="stk-stat__value"> 1,500 <span class="stk-stat__unit">ล้านบาท</span> </div> <p class="stk-stat__label">รายได้รวม</p> <div class="stk-stat__divider"></div> </div> </div> </div> </div></section>Props
| Field | Type | Required | Description |
|---|---|---|---|
title | string | ✓ | หัวข้อ section |
stats | array | ✓ | [{value, unit, label}] |
Dependencies
<!-- Optional: CountUp.js for animation --><script src="https://cdn.jsdelivr.net/npm/countup.js@2/dist/countUp.umd.min.js"></script>CSS Classes
.stk-stats /* section wrapper */.stk-stats--dark /* dark background */.stk-stats--primary /* primary color background */.stk-stat /* each stat item */.stk-stat__value /* number value */.stk-stat__unit /* unit text (ล้านบาท, คน) */.stk-stat__label /* description label */.stk-stat__divider /* decorative line */