Card Grid
แสดง content เป็น card grid รองรับทั้งแบบมีรูปและแบบ icon
Image Cards
เหมาะกับข่าวสาร กิจกรรม CSR
Previewcard-grid-image
<section class="stk-card-grid stk-section"> <div class="container"> <h2 class="stk-heading text-center mb-5">ข่าวสาร</h2> <div class="row g-4"> <div class="col-md-6 col-lg-4" data-aos="fade-up"> <div class="stk-card stk-card-grid__item"> <img src="/news/01.jpg" alt="ข่าว" class="stk-card-grid__img" loading="lazy"> <div class="stk-card-grid__body"> <span class="stk-card-grid__date">29 มี.ค. 2569</span> <h3 class="stk-card-grid__title">ผลประกอบการไตรมาส 1</h3> <p class="stk-card-grid__excerpt">บริษัทรายงานผลประกอบการ...</p> <a href="#" class="stk-card-grid__link">อ่านเพิ่มเติม →</a> </div> </div> </div> </div> </div></section>Props
| Field | Type | Required | Description |
|---|---|---|---|
title | string | ✓ | หัวข้อ section |
cards | array | ✓ | [{card_title, excerpt, image?, icon?, date?, link?}] |
CSS Classes
.stk-card-grid /* section wrapper */.stk-card-grid__item /* each card (flex column) */.stk-card-grid__img /* card image (16:9) */.stk-card-grid__body /* card content area */.stk-card-grid__date /* date text */.stk-card-grid__title /* card title */.stk-card-grid__excerpt /* card description */.stk-card-grid__link /* read more link */.stk-card-grid__icon /* icon box (icon variation) */