Timeline Examples

Interactive demos and real-world use cases

Timeline Component

The RSL Timeline component is a powerful, accessible way to display chronological events, project milestones, historical data, and progress tracking. It supports multiple variants, orientations, and interactive features all controlled through data attributes.

New to Timeline?

Get up and running in 5 minutes with our Quick Start Guide!

View Quick Start Guide
Pro Tip: All timeline examples on this page are fully accessible with keyboard navigation. Use Tab to focus events, Arrow keys to navigate, and Enter/Space to interact with collapsible events.

Basic Vertical Timeline

The default timeline orientation. Perfect for displaying chronological events in a top-to-bottom flow.

  1. Project Kickoff

    Initial planning meeting with stakeholders to define project scope and objectives.

  2. Design Phase Complete

    Wireframes and mockups approved by the design team.

  3. Development in Progress

    Building core features and implementing the design system.

  4. Testing Phase

    Quality assurance and user acceptance testing.

  5. Launch

    Product goes live to the public.

Basic Vertical Timeline • HTML


    
    
  1. 
        
    
            
        
    
        
    
            
            
    Project Kickoff
    
            
    Initial planning meeting...
    
        
    
    
    2. 
    
  2. 
        
    
            
        
    
        
    
            
            
    Development in Progress
    
            
    Building core features...
    
        
    
    
    3.

Card Variant

Enhanced visual presentation with card-style content containers, shadows, and hover effects.

  1. Company Founded

    Started in a small garage with just 3 people and a big dream.

    3 employees

  2. Seed Funding

    Raised $2M in seed funding to accelerate product development.

    $2M raised

  3. New Office

    Moved to a proper office space to accommodate the growing team.

    25 employees

  4. Global Expansion

    Expanding operations to Europe and Asia-Pacific regions.

    150+ employees 5 offices
Card Variant • HTML


    
    
  1. 
        
    
            
        
    
        
    
            
            
    Company Founded
    
            
    Started in a small garage...
    
            
    
                 3 employees
            
    
        
    
    
    2.

Split / Alternating Layout

Events alternate between left and right sides of the timeline for a balanced, visually appealing design.

  1. Ideation

    Market research and feature brainstorming sessions.

  2. Design

    UI/UX design and prototyping phase.

  3. Development

    Core feature development and integration.

  4. Beta Testing

    User acceptance testing and feedback collection.

  5. Public Launch

    Product available to all users worldwide.

Split Layout • HTML


    
    
  1. 
        
    
            
        
    
        
    
            
            
    Ideation
    
            
    Market research...
    
        
    
    
    2.

Horizontal Timeline

Display events in a horizontal scroll layout. Great for process flows and step-by-step guides.

  1. Order Placed

    Your order has been received.

  2. Payment Confirmed

    Payment successfully processed.

  3. Packaging

    Your items are being packed.

  4. Shipping

    On the way to your address.

  5. Delivered

    Package delivered successfully!

Horizontal Timeline • HTML


    
    
  1. 
        
    
            
        
    
        
    
            
            
    Order Placed
    
        
    
    
    2.

Minimal Variant

Clean, simplified design with less visual weight. Perfect for embedded timelines or sidebars.

  1. File uploaded

    report-q3-2024.pdf

  2. Comment added

    Sarah replied to your post

  3. Meeting scheduled

    Team sync at 3:00 PM

  4. Project created

    New project: RSL Timeline

Minimal Variant • HTML


    
    
  1. 
        
    
        
    
            
            
    File uploaded
    
            
    report-q3-2024.pdf
    
        
    
    
    2.

Size Variants

Three size options to fit your layout needs: small, medium (default), and large.

Small

  1. Event One

  2. Event Two

  3. Event Three

Medium (Default)

  1. Event One

  2. Event Two

  3. Event Three

Large

  1. Event One

  2. Event Two

  3. Event Three

Size Variants • HTML

Collapsible Events

Events can be expanded/collapsed to show or hide detailed information. Click any event to toggle.

  1. How do I install RSL Timeline?

    Include the CSS and JS files in your HTML:

    <link rel="stylesheet" href="timeline.css">
<script src="timeline.js"></script>

    Then add the data-rsl-timeline attribute to your timeline container. That's it!

  2. Can I customize the colors?

    Yes! Override any of the CSS variables to match your brand:

    .rsl-timeline {
    --rsl-timeline-completed: #10b981;
    --rsl-timeline-current: #3b82f6;
    --rsl-timeline-date-color: #8b5cf6;
}

  3. Is it accessible?

    RSL Timeline is built with WCAG 2.1 AA compliance in mind:

    • Full keyboard navigation (Tab, Arrow keys, Enter/Space)
    • Proper ARIA attributes and roles
    • Screen reader announcements
    • Respects prefers-reduced-motion
    • High contrast mode support
Collapsible Events • HTML



    
    
  1. 
        
    
            
        
    
        
    
            
            
    How do I install RSL Timeline?
    
            
            
    
                
    Include the CSS and JS files...
    
            
    
        
    
    
    2.

Scroll Animation

Events animate into view as you scroll down the page. Respects prefers-reduced-motion.

  1. Plant Seeds

    Prepare soil and plant your favorite vegetables.

  2. Water Regularly

    Keep soil moist and watch for early growth.

  3. Full Sun Exposure

    Plants thrive in the summer heat.

  4. Harvest Time

    Enjoy the fruits of your labor!

Scroll Animation • HTML


    
    
  1. 
        
    
    2.

Connector Styles

Customize the line connecting events with different styles.

Solid (Default)

  1. Step 1

  2. Step 2

  3. Step 3

Dashed

  1. Step 1

  2. Step 2

  3. Step 3

Dotted

  1. Step 1

  2. Step 2

  3. Step 3

Gradient

  1. Step 1

  2. Step 2

  3. Step 3

Connector Styles • HTML

JavaScript API

Programmatically control timelines using the JavaScript API.

  1. Timeline Started

    This is the first event in the timeline.

JavaScript API • JS

// Add a new event
RSL.Timeline.addEvent(timeline, {
    id: 'new-event',
    date: 'Today',
    title: 'New Event Added',
    description: 'This event was added via the API.',
    icon: 'fas fa-star',
    status: 'current'
});

// Remove an event by ID
RSL.Timeline.removeEvent(timeline, 'event-id');

// Update an existing event
RSL.Timeline.updateEvent(timeline, 'event-id', {
    status: 'completed',
    title: 'Updated Title'
});

// Scroll to a specific event
RSL.Timeline.scrollTo(timeline, 'event-id');

// Get all events data
var events = RSL.Timeline.getEventsData(timeline);

// Filter events by category
RSL.Timeline.filter(timeline, { category: 'milestone' });

// Expand/collapse (for collapsible timelines)
RSL.Timeline.expand(timeline, 'event-id');
RSL.Timeline.collapse(timeline, 'event-id');
RSL.Timeline.expandAll(timeline);
RSL.Timeline.collapseAll(timeline);

Accessibility Quick Notes

See FilterBus in Action

Watch how Timeline can filter events based on status, category, or type. This live demo shows Timeline working alongside other filterable components in a dashboard.

View Live Dashboard Demo