Search
Quick Commands
run:diagnostics Run all system checks
db:connect Connect to primary DB
cache:clear Clear application cache
users:list Show all active users
Notifications

Stay on top of recent system events and updates.

  • Notification avatar
    System Update Available

    Version 2.4.1 is ready to install with new features.

    2 minutes ago

  • AB
    New User Registration

    Alex Brown from Canada has joined the platform.

    15 minutes ago

  • Notification avatar
    Backup Completed

    Daily backup has been successfully completed.

    1 hour ago

  • Notification avatar
    Security Alert

    Unusual login activity detected from new location.

    3 hours ago

  • Notification avatar
    Monthly Report Ready

    Your analytics report for September is now available.

    Yesterday

  • MJ
    Server Maintenance

    Scheduled maintenance will begin at 2:00 AM EST.

    2 days ago

Horizontal Timeline

Display chronological events in a left-to-right flow with equal-sized cards

  • rocket_launch

    Project Started

    access_time 2 hours ago

    Initial project setup and planning phase completed successfully.

  • palette

    Design Approved

    access_time 4 hours ago

    Client approved the initial design mockups and wireframes.

  • code

    Development Started

    access_time 6 hours ago

    Frontend development phase has begun with core components.

  • visibility

    Code Review

    access_time 8 hours ago

    Code review process initiated for quality assurance.

  • build

    Bug Fixes

    access_time 10 hours ago

    Critical bugs identified and fixes implemented.

  • cloud_upload

    Deployment

    access_time 12 hours ago

    Application successfully deployed to production environment.

Usage

Add .timeline-horizontal alongside .timeline for horizontal layout with flexbox equal-width cards.

<ul class="timeline timeline-horizontal">
    <li class="timeline-item">
        <div class="timeline-badge primary">
            <i class="material-symbols-rounded">rocket_launch</i>
        </div>
        <div class="timeline-panel">
            <div class="timeline-heading">
                <h4 class="timeline-title">Project Started</h4>
                <p><small>2 hours ago</small></p>
            </div>
            <div class="timeline-body">
                <p>Project setup completed.</p>
            </div>
        </div>
    </li>
</ul>
Vertical Timeline - Alternating

Center-aligned timeline with alternating left and right panels

  • settings

    System Initialization

    access_time 1 hour ago

    System initialization completed successfully. All services are running properly and ready for operation.

  • storage

    Database Migration

    access_time 2 hours ago

    Database migration completed successfully. All tables and indexes have been updated.

  • cached

    Cache Cleared

    access_time 3 hours ago

    Application cache cleared successfully. Performance optimizations applied and new cache structure implemented.

  • security

    Security Update

    access_time 4 hours ago

    Security patches applied successfully. All vulnerabilities have been addressed and system is secure.

Usage

Use .timeline class for alternating panels. Apply color classes to badges: .primary, .success, .info, .warning, .danger.

<ul class="timeline">
    <li class="timeline-item">
        <div class="timeline-badge primary">
            <i class="material-symbols-rounded">settings</i>
        </div>
        <div class="timeline-panel">
            <div class="timeline-heading">
                <h4 class="timeline-title">System Initialization</h4>
                <p><small>1 hour ago</small></p>
            </div>
            <div class="timeline-body">
                <p>System initialized successfully.</p>
            </div>
        </div>
    </li>
</ul>
Modern Timeline

Clean, minimal timeline with circular icons and connecting lines - perfect for order tracking

User
Order Delivered

Package successfully delivered to customer

schedule December 22, 2024 at 4:54 PM
User
Out for Delivery

Package is on the way

schedule December 22, 2024 at 8:10 AM
User
Order Processed

Order confirmed and ready

schedule December 22, 2024 at 7:21 AM
JD
Order Placed

Order received successfully

schedule December 22, 2024 at 7:20 AM
User
Project Milestone

Major milestone achieved

schedule 2 hours ago
User
Issue Detected

System reported an error

schedule 4 hours ago
SM
Issue Resolved

All systems operational

schedule 5 hours ago
Usage

Use .timeline-modern class for a clean, minimal timeline with circular icons. Great for order tracking, process flows, and activity feeds.

<div class="timeline-modern">
    <div class="timeline-item-modern mb-4">
        <div class="d-flex">
            <div class="flex-shrink-0">
                <div class="timeline-icon-modern bg-success">
                    <i class="material-symbols-rounded">check_circle</i>
                </div>
            </div>
            <div class="flex-grow-1 ms-3">
                <h6 class="mb-1">Event Title</h6>
                <p class="text-sm text-muted mb-1">Event description</p>
                <small class="text-muted">Timestamp</small>
            </div>
        </div>
        <div class="timeline-line-modern"></div>
    </div>
</div>
Vertical Timeline - One-Sided

Compact single-column timeline for sidebars and smaller spaces

  • power_settings_new

    System Initialization

    access_time 1 hour ago

    System initialization completed successfully.

  • storage

    Database Migration

    access_time 2 hours ago

    Database migration completed successfully.

  • cached

    Cache Cleared

    access_time 3 hours ago

    Application cache cleared successfully.

  • security

    Security Update

    access_time 4 hours ago

    Security patches applied successfully.

  • error

    Error Detected

    access_time 5 hours ago

    Critical error detected in authentication service.

  • build

    Hotfix Applied

    access_time 6 hours ago

    Emergency hotfix deployed to production.

  • check_circle

    System Restored

    access_time 7 hours ago

    All systems operational and running normally.

Usage

Combine .timeline with .timeline-one-side for compact single-column layout.

<ul class="timeline timeline-one-side">
    <li class="timeline-item">
        <div class="timeline-badge primary">
            <i class="material-symbols-rounded">power_settings_new</i>
        </div>
        <div class="timeline-panel">
            <div class="timeline-heading">
                <h4 class="timeline-title">System Init</h4>
                <p><small>1 hour ago</small></p>
            </div>
            <div class="timeline-body">
                <p>System initialized.</p>
            </div>
        </div>
    </li>
</ul>