Create chronological event displays, progress trackers, and history views with the V2 Timeline content type
A simple vertical timeline showing project milestones with status indicators. Uses the V2 semantic timeline content type for clean, declarative configuration.
const config = {
version: 2,
layoutId: "project-timeline",
breakpoints: { xs: 1 },
items: [{
content: {
type: "timeline",
ariaLabel: "Project timeline",
events: [
{
id: "1",
date: "January 2024",
title: "Project Kickoff",
description: "Initial planning and team formation.",
status: "completed",
icon: "fas fa-flag"
},
{
id: "2",
date: "March 2024",
title: "Development Phase",
description: "Building core features and functionality.",
status: "current",
icon: "fas fa-code"
},
{
id: "3",
date: "June 2024",
title: "Launch",
description: "Product release to production.",
status: "upcoming",
icon: "fas fa-rocket"
}
]
}
}]
};
RSL.JSONLayout.renderLayout('#container', config);Timeline events displayed as cards with additional metadata. Perfect for company history, product roadmaps, or detailed event logs.
const config = {
version: 2,
layoutId: "company-history",
breakpoints: { xs: 1 },
items: [{
content: {
type: "timeline",
variant: "card",
ariaLabel: "Company history",
events: [
{
id: "founded",
date: "2020",
title: "Company Founded",
description: "Started with a vision to revolutionize the industry.",
status: "completed",
icon: "fas fa-building",
meta: [
{ icon: "fas fa-users", text: "3 employees" },
{ icon: "fas fa-map-marker-alt", text: "San Francisco" }
]
},
{
id: "series-a",
date: "2022",
title: "Series A Funding",
description: "Raised $10M to accelerate growth.",
status: "completed",
icon: "fas fa-chart-line",
meta: [
{ icon: "fas fa-users", text: "25 employees" },
{ icon: "fas fa-dollar-sign", text: "$10M raised" }
]
},
{
id: "global",
date: "2024",
title: "Global Expansion",
description: "Expanding operations worldwide.",
status: "current",
icon: "fas fa-globe",
meta: [
{ icon: "fas fa-users", text: "150+ employees" },
{ icon: "fas fa-building", text: "5 offices" }
]
}
]
}
}]
};
RSL.JSONLayout.renderLayout('#container', config);A horizontal timeline perfect for order tracking, process steps, or wizard-style progress indicators.
const config = {
version: 2,
layoutId: "order-tracking",
breakpoints: { xs: 1 },
items: [{
content: {
type: "timeline",
orientation: "horizontal",
ariaLabel: "Order tracking",
events: [
{
id: "ordered",
date: "Step 1",
title: "Order Placed",
status: "completed",
icon: "fas fa-shopping-cart"
},
{
id: "confirmed",
date: "Step 2",
title: "Confirmed",
status: "completed",
icon: "fas fa-check-circle"
},
{
id: "shipped",
date: "Step 3",
title: "Shipped",
status: "current",
icon: "fas fa-truck"
},
{
id: "delivered",
date: "Step 4",
title: "Delivered",
status: "upcoming",
icon: "fas fa-home"
}
]
}
}]
};
RSL.JSONLayout.renderLayout('#container', config);A collapsible timeline where users can expand events to see more details. Great for FAQs, documentation, or detailed event histories.
const config = {
version: 2,
layoutId: "faq-timeline",
breakpoints: { xs: 1 },
items: [{
content: {
type: "timeline",
variant: "card",
collapsible: true,
ariaLabel: "Frequently asked questions",
events: [
{
id: "install",
date: "Getting Started",
title: "How do I install RSL Timeline?",
status: "completed",
icon: "fas fa-question",
details: "<p>Include the CSS and JS files in your HTML:</p><pre><link rel=\"stylesheet\" href=\"timeline.css\">\n<script src=\"timeline.js\"></script></pre>"
},
{
id: "customize",
date: "Customization",
title: "Can I customize the colors?",
status: "completed",
icon: "fas fa-question",
details: "<p>Yes! Override CSS variables to match your brand:</p><pre>.rsl-timeline {\n --rsl-timeline-completed: #10b981;\n --rsl-timeline-current: #3b82f6;\n}</pre>"
},
{
id: "a11y",
date: "Accessibility",
title: "Is it accessible?",
status: "completed",
icon: "fas fa-question",
details: "<p>RSL Timeline is WCAG 2.1 AA compliant with:</p><ul><li>Full keyboard navigation</li><li>Proper ARIA attributes</li><li>Screen reader support</li></ul>"
}
]
}
}]
};
RSL.JSONLayout.renderLayout('#container', config);