Skip to main content

Work Experience Timeline

ListWorkExperience Lists & Timelines 15 options JavaScript

Pinned horizontal-scroll timeline of roles on desktop; a simple vertical list on mobile.

Published · by Christopher Alberto

Live demo

Open full screen

At a glance

Component
ListWorkExperience
Category
Lists & Timelines
Used as
Page block — “List: Work Experience”
Options
15 editable fields
Built with
PHP, Twig, SCSS, JavaScript
Platform
WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

The experience timeline. On desktop the section pins while you scroll and the roles pan horizontally; below 880px it becomes a normal vertical stack.

Highlights

  • Built with CSS position: sticky and scroll progress — no scroll hijacking.
  • Each role: dates, title, company and bullet points, on a glassmorphism card.
  • Optional footnote for older roles.

Options

Editors add this as List: Work Experience in a page's components. Every field it exposes:

Option Field Type Details
Number num text Default: 02
Heading heading text Default: Experience
Intro intro textarea Default: Placeholder intro text for the experience timeline sample.
Roles roles repeater Repeatable list
↳ Dates * dates text Default: Jan 2020 — Present
↳ Title * title text Default: Sample Role Title
↳ Company * company text Default: Sample Company · Full-time
↳ Bullets bullets repeater Repeatable list
↳ Bullet * bullet text Default: Sample achievement bullet.
Closing Card closing group Optional last card in the row, e.g. earlier roles with a link to LinkedIn.
↳ Dates dates text
↳ Title title text
↳ Text text textarea
↳ Link link link
Footnote footnote wysiwyg Default: Sample footnote text for additional context below the timeline. Shown below the list, e.g. a note about earlier roles.

Under the hood

Components/ListWorkExperience/

  • _style.scss Styles (SCSS) 232 lines
  • functions.php Fields & data (PHP) 179 lines
  • index.twig Markup (Twig) 49 lines
  • script.js Behaviour (JavaScript) 100 lines

Share this component
Christopher Alberto

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub

Related components