Timeline

Visualizing Events and Progress Through Time

Overview

Timelines are powerful visual tools for presenting chronological information, making them invaluable for showcasing historical events, project milestones, or organizational developments.

The FAO Design System incorporates TimelineJS3, a robust and flexible open-source tool, to create interactive and visually appealing timelines. This integration allows for the creation of responsive, media-rich timelines that can include text, images, videos, and more, enhancing the storytelling capabilities of FAO's digital content.

By using timelines, FAO can present complex historical data or project progressions in an easily digestible format.

Usage

To implement a timeline using the FAO Design System, follow these steps:

Install TimelineJS3

npm i @knight-lab/timelinejs

Include a container element with a unique ID in your HTML

Import TimelineJS3 JavaScript and Styles

import { Timeline } from "@knight-lab/timelinejs" import "@knight-lab/timelinejs/dist/css/timeline.css"

Initialize the timeline with the following JavaScript code, you can fetch and pass the timeline data as a JSON object:

window.timeline = new Timeline("timeline", timelineData);

On this page