Timeline
แสดงเหตุการณ์สำคัญเรียงตามปี เหมาะกับประวัติองค์กร
Vertical
เหมาะกับประวัติแบบละเอียด เหตุการณ์เยอะ
Previewtimeline-vertical
<section class="stk-section"> <div class="container"> <h2 class="stk-heading text-center mb-5">ประวัติองค์กร</h2> <div class="stk-timeline stk-timeline--vertical"> <div class="stk-timeline__item" data-aos="fade-up"> <div class="stk-timeline__dot"></div> <div class="stk-timeline__content"> <div class="stk-timeline__year">2533</div> <p class="stk-timeline__text">ก่อตั้งบริษัท</p> </div> </div> </div> </div></section>Props
| Field | Type | Required | Description |
|---|---|---|---|
title | string | ✓ | หัวข้อ section |
items | array | ✓ | [{year, event}] |
Dependencies
<!-- AOS (Animate On Scroll) --><link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"><script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script><script>AOS.init({ duration: 800, once: true });</script>CSS Classes
.stk-timeline /* base */.stk-timeline--vertical /* vertical variation */.stk-timeline--horizontal /* horizontal variation */.stk-timeline__line /* center line */.stk-timeline__item /* each event */.stk-timeline__dot /* circle dot */.stk-timeline__content /* content card */.stk-timeline__year /* year label */.stk-timeline__text /* event description */