StackUI

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

FieldTypeRequiredDescription
titlestringหัวข้อ section
itemsarray[{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 */

On this page