Interactive
Timeline
A vertical or horizontal sequence of events.
Live demo
See it in action
2019
The idea
Unyson+ starts as a modern continuation of the classic Unyson framework.
2021
The page builder
A visual drag-and-drop builder ships with sections, columns and the first elements.
2023
60+ elements
The library grows to over sixty elements, all free and open source under the GPL.
Today
Built with you
A GitHub auto-updater keeps every site current as new elements and fixes land.
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<div class="timeline tl-b75e08e2 fw-tl fw-tl--design-alternating design-alternating fw-tl--marker-dot fw-tl--card-card" style="">
<div class="fw-tl__track">
<div class="fw-tl__item">
<div class="fw-tl__marker" aria-hidden="true">
<span class="fw-tl__marker-dot"></span>
</div>
<div class="fw-tl__content">
<div class="fw-tl__card">
<div class="fw-tl__date">
2019
</div>
<h4 class="fw-tl__title">The idea</h4>
<div class="fw-tl__text">
<p>Unyson+ starts as a modern continuation of the classic Unyson framework.</p>
</div>
</div>
</div>
</div>
<div class="fw-tl__item">
<div class="fw-tl__marker" aria-hidden="true">
<span class="fw-tl__marker-dot"></span>
</div>
<div class="fw-tl__content">
<div class="fw-tl__card">
<div class="fw-tl__date">
2021
</div>
<h4 class="fw-tl__title">The page builder</h4>
<div class="fw-tl__text">
<p>A visual drag-and-drop builder ships with sections, columns and the first elements.</p>
</div>
</div>
</div>
</div>
<div class="fw-tl__item">
<div class="fw-tl__marker" aria-hidden="true">
<span class="fw-tl__marker-dot"></span>
</div>
<div class="fw-tl__content">
<div class="fw-tl__card">
<div class="fw-tl__date">
2023
</div>
<h4 class="fw-tl__title">60+ elements</h4>
<div class="fw-tl__text">
<p>The library grows to over sixty elements, all free and open source under the GPL.</p>
</div>
</div>
</div>
</div>
<div class="fw-tl__item">
<div class="fw-tl__marker" aria-hidden="true">
<span class="fw-tl__marker-dot"></span>
</div>
<div class="fw-tl__content">
<div class="fw-tl__card">
<div class="fw-tl__date">
Today
</div>
<h4 class="fw-tl__title">Built with you</h4>
<div class="fw-tl__text">
<p>A GitHub auto-updater keeps every site current as new elements and fixes land.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>To learn more about the Timeline shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.