jekyll-timeline
A Jekyll plugin providing timeline and event block tags that render a vertical timeline component. Pure HTML and CSS output — no JavaScript, no external dependencies. Supports Font Awesome, any CSS icon library, and emoji.
A Jekyll plugin that provides timeline and timeline_event block tags for rendering a vertical timeline component in any post or page. Pure HTML/CSS output — no JavaScript, no external dependencies. Supports Font Awesome, any CSS icon library that uses class-based icons, emoji, per-event color overrides, and ascending or descending sort order.
Installation
Add to your Gemfile:
gem "jekyll-timeline"
Add to _config.yml:
plugins:
- jekyll-timeline
Run bundle install, then copy _timeline.scss into your site’s SCSS directory and import it.
Usage
{% timeline %}
{% timeline_event date="January 2024" title="Project launched" icon="fa-rocket" %}
Shipped the first public release after six months of development.
{% endtimeline_event %}
{% timeline_event date="March 2024" title="1,000 users" icon="fa-users" color="#2ecc71" %}
Crossed 1,000 active users and added team management features.
{% endtimeline_event %}
{% timeline_event date="June 2024" title="v2.0 released" icon="fa-bolt" %}
Complete rewrite with improved performance and a new API.
{% endtimeline_event %}
{% endtimeline %}
Use order="desc" to reverse chronological order:
{% timeline order="desc" %}...{% endtimeline %}
Icon Support
The icon= attribute accepts:
- CSS icon library classes —
icon="fa-rocket"(auto-prefixed with your configured prefix) oricon="fa-brands fa-github"(explicit classes). Works with Font Awesome, Phosphor, Material Symbols, or any library that uses CSS classes. - Emoji —
icon="🚀" - Omitted — renders a neutral dot
Configure the default icon prefix in _config.yml:
timeline:
default_icon_prefix: "fa-duotone fa-solid"
Demo
City Council adopted the 10-year Downtown Master Plan, establishing priorities for streetscape improvements, mixed-use development, and public space activation.
DDA launched the façade improvement grant program. 12 businesses received awards in the first year totaling $180,000 in private investment leverage.
Completed the $4.2M Main Street infrastructure project: new sidewalks, decorative lighting, street trees, and underground utility relocation.
Private developer broke ground on the adaptive reuse of the 1920s textile mill into 84 mixed-income apartments and 6,000 sq ft of ground-floor retail.
Downtown commercial vacancy fell from 22% in 2020 to 8% — the lowest recorded level since tracking began. Net new businesses: 31.
Styling
Customize via CSS custom properties:
:root {
--timeline-line-color: #dee2e6;
--timeline-icon-bg: #6c757d;
--timeline-icon-color: #fff;
--timeline-date-color: #6c757d;
--timeline-title-color: inherit;
--timeline-body-color: inherit;
}
