Materio Bootstrap Dashboard by ThemeSelection

Timeline

Timeline is the presentation of a chronological sequence of events along a drawn line that equips a viewer to understand temporal relationships quickly.

We are using animate on scroll plugin to animate timeline on page scroll. Read the official Animate on scroll for a full list of instructions and other options.

Basic Timeline#

Create a basic timeline by using .timeline as a wrapper of .timeline-item. Define your events inside .timeline-event.

Add a point to timeline by using .timeline-point inside .timeline-item. Use three different kind of timeline pointer options: Point Timeline, Outline Timeline and Indicator Timeline with Icon. To create a point timeline, use .timeline-point-primary with .timeline-point. To create a outline timeline, use .timeline-outline with .timeline. To create a indicator timeline with icon, use .timeline-indicator-primary with .timeline-indicator.

Change indicator's color by using class timeline-point-{color} and timeline-indicator-{color} with .timeline-point & .timeline-indicator respectively.

Info: You can use all point, icon and advanced indicator together in same timeline.

Preview
HTML

12 Invoices have been paid
12 min ago

Invoices have been paid to the company

invoices.pdf
Client Meeting
45 min ago

Project meeting with john @10:15am

Lester McCarthy (Client)
CEO of ThemeSelection
Create a new project for client
2 Day Ago

6 team members in a project
- - +3

<ul class="timeline">
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-primary"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0 text-body">12 Invoices have been paid</h6>
        <small class="text-body-secondary">12 min ago</small>
      </div>
      <p class="mb-2">
        Invoices have been paid to the company
      </p>
      <div class="d-flex align-items-center mb-1">
        <div class="badge bg-lighter rounded-3 mb-1_5">
          <img src="../../assets/img/icons/misc/pdf.png" alt="img" width="15" class="me-2">
          <span class="h6 mb-0">invoices.pdf</span>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-success"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0">Client Meeting</h6>
        <small class="text-body-secondary">45 min ago</small>
      </div>
      <p class="mb-2">
        Project meeting with john @10:15am
      </p>
      <div class="d-flex justify-content-between flex-wrap gap-2 mb-1_5">
        <div class="d-flex flex-wrap align-items-center">
          <div class="avatar avatar-sm me-2">
            <img src="../../assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div>
            <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
            <small>CEO of ThemeSelection</small>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-info"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0">Create a new project for client</h6>
        <small class="text-body-secondary">2 Day Ago</small>
      </div>
      <p class="mb-2">
        6 team members in a project
      </p>
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
          <div class="d-flex flex-wrap align-items-center">
            <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
                <img class="rounded-circle" src="../../assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
                <img class="rounded-circle" src="../../assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
                <img class="rounded-circle" src="../../assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li class="avatar">
                <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

Timeline Outlined#

Create timeline Outlined by using class .timeline-outline with .timeline class.

Preview
HTML

12 Invoices have been paid
12 min ago

Invoices have been paid to the company

invoices.pdf
Client Meeting
45 min ago

Project meeting with john @10:15am

Lester McCarthy (Client)
CEO of ThemeSelection
Create a new project for client
2 Day Ago

6 team members in a project
- - +3

                <ul class="timeline timeline-outline mb-0">
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-primary"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0">12 Invoices have been paid</h6>
        <small class="text-body-secondary">12 min ago</small>
      </div>
      <p class="mb-2"> Invoices have been paid to the company</p>
      <div class="d-flex align-items-center mb-1">
        <div class="badge bg-lighter rounded mb-1_5">
          <img src="../../assets/img/icons/misc/pdf.png" alt="img" width="15" class="me-2">
          <span class="h6 mb-0 text-body">invoices.pdf</span>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-success"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0">Client Meeting</h6>
        <small class="text-body-secondary">45 min ago</small>
      </div>
      <p class="mb-2">
        Project meeting with john @10:15am
      </p>
      <div class="d-flex justify-content-between flex-wrap gap-2 mb-1_5">
        <div class="d-flex flex-wrap align-items-center">
          <div class="avatar avatar-sm me-2">
            <img src="../../assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div>
            <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
            <small>CEO of ThemeSelection</small>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-info"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0">Create a new project for client</h6>
        <small class="text-body-secondary">2 Day Ago</small>
      </div>
      <p class="mb-2">6 team members in a project</p>
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
          <div class="d-flex flex-wrap align-items-center">
            <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
                <img class="rounded-circle" src="../../assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
                <img class="rounded-circle" src="../../assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
                <img class="rounded-circle" src="../../assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li class="avatar">
                <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

Center#

Create a centered timeline by using .timeline-center with .timeline. Centered Timeline's items will automatically take their position. If you want to position them manually, you can use .timeline-item-{left|right} with .timeline-item.

Use animate on scroll for timeline animation, click here to learn about it's usage.

Preview
HTML

Designing UI

Design Meeting
Our main goal is to design a new mobile application for our client. The customer wants a clean & flat design.
Participants
1st January
Survey Report
assigned this task to Sarah
- Jquery
- React React React React
- Angular
- VUE
- Laravel
2nd January
Financial Reports
Click the button below to read financial reports
- Last Years's Profit : $20000
- This Years's Profit : $25000
- Last Years's Commission : $5000
- This Years's Commission : $7000
- This Years's Total Balance : $70000
5th January
Snacks

A Donut which straight gone to Your Tummy

I gaze longingly at the beautiful, perfect, plump donut. This is a delicately crafted piece of art. The mouthwatering mound of miraculous mush isn't able to escape my sight...read more

$5.00

10th January
Location
High

Final location for the company celebration.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem?

Due Date: 15th Jan

12th January
Gym Program
5:00 - 6:10AM

1.1 Hours Weekly

Rock's Gym

Gym Power

15th January
General Reserve
- Cash
  $500
- Credit Card
  $5000
- Investments
  $300
16th January
Ubuntu Server
Inactive
- IP Address
  
  192.654.8.566
- CPU
  
  4 Cores
- Ram
  
  500 MB
20th January
Online Store

Develop an online store of electronic devices for the provided layout, as well as develop a mobile version of it. The must be compatible with any CMS.

Developers

A

B

C

Deadline

20 Dec 2077

Budget

$50000

25th January

<ul class="timeline timeline-center pt-12">
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
      <i class="icon-base ri ri-brush-fill"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
        <h6 class="card-title mb-0">Designing UI</h6>
        <div class="meta">
          <span class="badge rounded-pill bg-label-primary">Design</span>
          <span class="badge rounded-pill bg-label-success">Meeting</span>
        </div>
      </div>
      <div class="card-body">
        <p class="mb-2">
          Our main goal is to design a new mobile application for our
          client. The customer wants a clean & flat design.
        </p>
        <div class="d-flex justify-content-between align-items-center flex-wrap">
          <div>
            <p class="text-body-secondary mb-2">Participants</p>
            <ul class="list-unstyled users-list d-flex align-items-center avatar-group">
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar avatar-xs pull-up">
                <img class="rounded-circle" src="../../assets/img/avatars/5.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar avatar-xs pull-up">
                <img class="rounded-circle" src="../../assets/img/avatars/12.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar avatar-xs pull-up">
                <img class="rounded-circle" src="../../assets/img/avatars/6.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Darcey Nooner" class="avatar avatar-xs pull-up">
                <img class="rounded-circle" src="../../assets/img/avatars/10.png" alt="Avatar" />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="timeline-event-time">1st January</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-success" data-aos="zoom-in" data-aos-delay="200">
      <i class="icon-base ri ri-question-mark"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <h6 class="card-header">Survey Report</h6>
      <div class="card-body">
        <div class="d-flex flex-wrap mb-6">
          <div>
            <div class="avatar avatar-xs me-2">
              <img src="../../assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
            </div>
          </div>
          <span>assigned this task to <span class="fw-medium">Sarah</span></span>
        </div>
        <ul class="list-unstyled">
          <li class="d-flex">
            <div>
              <div class="avatar avatar-xs me-4">
                <img src="../../assets/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="mb-3 w-100">
              <div class="progress" style="height: 6px;">
                <div class="progress-bar bg-danger" role="progressbar" style="width: 48.7%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small>Jquery</small>
            </div>
          </li>
          <li class="d-flex">
            <div>
              <div class="avatar avatar-xs me-4">
                <img src="../../assets/img/avatars/3.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="mb-3 w-100">
              <div class="progress" style="height: 6px;">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 31.3%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small>React</small>
              <small>React</small>
              <small>React</small>
              <small>React</small>
            </div>
          </li>
          <li class="d-flex">
            <div>
              <div class="avatar avatar-xs me-4">
                <img src="../../assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="mb-3 w-100">
              <div class="progress" style="height: 6px;">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small>Angular</small>
            </div>
          </li>
          <li class="d-flex">
            <div>
              <div class="avatar avatar-xs me-4">
                <img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="mb-3 w-100">
              <div class="progress" style="height: 6px;">
                <div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small>VUE</small>
            </div>
          </li>
          <li class="d-flex">
            <div>
              <div class="avatar avatar-xs me-4">
                <img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="w-100">
              <div class="progress" style="height: 6px;">
                <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small>Laravel</small>
            </div>
          </li>
        </ul>
      </div>
      <div class="timeline-event-time">2nd January</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-danger" data-aos="zoom-in" data-aos-delay="200">
      <i class="icon-base ri ri-line-chart-line"></i>
    </span>

    <div class="timeline-event card p-0" data-aos="fade-right">
      <h6 class="card-header">Financial Reports</h6>

      <div class="card-body">
        <p class="mb-2">Click the button below to read financial reports</p>
        <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
          Show Report
        </button>
        <div class="collapse" id="collapseExample">
          <ul class="list-group list-group-flush mt-4">
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span>Last Years's Profit : <span class="fw-medium">$20000</span></span>
              <i class="icon-base ri ri-share-line cursor-pointer icon-sm"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> This Years's Profit : <span class="fw-medium">$25000</span></span>
              <i class="icon-base ri ri-share-line cursor-pointer icon-sm"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> Last Years's Commission : <span class="fw-medium">$5000</span></span>
              <i class="icon-base ri ri-share-line cursor-pointer icon-sm"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> This Years's Commission : <span class="fw-medium">$7000</span></span>
              <i class="icon-base ri ri-share-line cursor-pointer icon-sm"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span>
                This Years's Total Balance : <span class="fw-medium">$70000</span></span>
              <i class="icon-base ri ri-share-line cursor-pointer icon-sm"></i>
            </li>
          </ul>
        </div>
      </div>
      <div class="timeline-event-time">5th January</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-warning" data-aos="zoom-in" data-aos-delay="200">
      <i class="icon-base ri ri-donut-chart-fill"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <h6 class="card-header">Snacks</h6>
      <div class="card-body">
        <div class="d-flex flex-sm-row flex-column">
          <img src="../../assets/img/elements/56.jpg" class="rounded me-4 mb-sm-0 mb-2" alt="doughnut" height="64" width="64" />
          <div>
            <h6 class="mb-2">
              A Donut which straight gone to Your Tummy
            </h6>
            <p class="mb-2">
              I gaze longingly at the beautiful, perfect, plump donut. This
              is a delicately crafted piece of art. The mouthwatering mound
              of miraculous mush isn't able to escape my sight...<a href="javascript:void(0)">read more</a>
            </p>
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <i class="icon-base ri ri-star-fill text-warning"></i>
                <i class="icon-base ri ri-star-fill text-warning"></i>
                <i class="icon-base ri ri-star-fill text-warning"></i>
                <i class="icon-base ri ri-star-fill text-warning"></i>
                <i class="icon-base ri ri-star-line"></i>
              </div>
              <div>
                <span class="fw-medium">$5.00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="timeline-event-time">10th January</div>
    </div>
  </li>
  <li class="timeline-item timeline-item-right">
    <span class="timeline-indicator timeline-indicator-info" data-aos="zoom-in" data-aos-delay="200">
      <i class="icon-base ri ri-map-pin-line icon-sm"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <div class="card-header border-0 d-flex justify-content-between">
        <h6 class="card-title mb-0">
          <i class="icon-base ri ri-map-pin-line icon-sm"></i>
          <span class="align-middle">Location</span>
        </h6>
        <span class="badge rounded-pill bg-label-danger">High</span>
      </div>
      <div class="card-body py-0">
        <h6 class="mb-2">
          Final location for the company celebration.
        </h6>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas,
          quidem?
        </p>
      </div>
      <div class="card-footer d-flex justify-content-between">
        <div class="d-flex flex-wrap cursor-pointer gap-4">
          <i class="icon-base ri ri-links-line"></i>
          <div class="position-relative">
            <i class="icon-base ri ri-chat-4-line"></i>
            <span class="badge rounded-pill bg-info badge-dot badge-notifications"></span>
          </div>
          <i class="icon-base ri ri-user-line"></i>
        </div>
        <p class="mb-0">
          <span class="text-body-secondary">Due Date:</span>
          15th Jan
        </p>
      </div>
      <div class="timeline-event-time">12th January</div>
    </div>
  </li>
  <li class="timeline-item timeline-item-left">
    <span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
      <i class="icon-base ri ri-open-arm-line"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <div class="card-header border-0 d-flex justify-content-between">
        <h6 class="card-title mb-0">Gym Program</h6>
        <span class="text-body-secondary">5:00 - 6:10AM</span>
      </div>
      <div class="card-body pb-4 pt-0">
        <div class="hours mb-2">
          <i class="icon-base ri ri-time-line icon-sm"></i>
          <span>1.1 Hours</span>
          <i class="icon-base ri ri-arrow-left-right-line mx-2"></i>
          <span>Weekly</span>
        </div>
        <div class="location">
          <i class="icon-base ri ri-map-pin-line icon-sm"></i>
          <span class="align-middle">Rock's Gym</span>
        </div>
      </div>
      <div class="card-footer d-flex justify-content-between">
        <div class="tags">
          <span class="badge rounded-pill bg-label-danger">Gym</span>
          <span class="badge rounded-pill bg-label-info">Power</span>
        </div>
        <div>
          <i class="icon-base ri ri-more-2-fill cursor-pointer"></i>
        </div>
      </div>
      <div class="timeline-event-time">15th January</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-success" data-aos="zoom-in" data-aos-delay="200">
      <i class="icon-base ri ri-money-dollar-circle-line"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <h6 class="card-header">General Reserve</h6>
      <div class="card-body">
        <ul class="list-unstyled">
          <li class="d-flex justify-content-start align-items-center text-success mb-4">
            <i class="icon-base ri ri-money-dollar-circle-line icon-24px me-4"></i>
            <div class="ps-3 border-start">
              <small class="text-body-secondary mb-1">Cash</small>
              <h5 class="mb-0">$500</h5>
            </div>
          </li>
          <li class="d-flex justify-content-start align-items-center text-info mb-4">
            <i class="icon-base ri ri-bank-card-2-line icon-24px me-4"></i>
            <div class="ps-3 border-start">
              <small class="text-body-secondary mb-1">Credit Card</small>
              <h5 class="mb-0">$5000</h5>
            </div>
          </li>
          <li class="d-flex justify-content-start align-items-center text-primary">
            <i class="icon-base ri ri-line-chart-line icon-24px me-4"></i>
            <div class="ps-3 border-start">
              <small class="text-body-secondary mb-1">Investments</small>
              <h5 class="mb-0">$300</h5>
            </div>
          </li>
        </ul>
      </div>
      <div class="timeline-event-time">16th January</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-danger" data-aos="zoom-in" data-aos-delay="200">
      <i class="icon-base ri ri-server-fill"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <div class="card-header border-0 d-flex justify-content-between">
        <h6 class="card-title mb-0">
          <span class="align-middle">Ubuntu Server</span>
        </h6>
        <span class="badge rounded-pill bg-label-danger">Inactive</span>
      </div>
      <div class="card-body pb-2 pt-0">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between align-items-center ps-0">
            <div>
              <i class="icon-base ri ri-global-line icon-sm"></i>
              <span>IP Address</span>
            </div>
            <div>
              192.654.8.566
            </div>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center ps-0">
            <div>
              <i class="icon-base ri ri-cpu-line icon-sm"></i>
              <span>CPU</span>
            </div>
            <div>
              4 Cores
            </div>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center ps-0">
            <div>
              <i class="icon-base ri ri-ram-2-fill icon-sm"></i>
              <span>Ram</span>
            </div>
            <div>
              500 MB
            </div>
          </li>
        </ul>
      </div>
      <div class="card-footer d-flex justify-content-between">
        <div class="server-icons">
          <i class="icon-base ri ri-share-line me-2 icon-sm"></i>
          <i class="icon-base ri ri-loop-left-line icon-sm"></i>
        </div>
      </div>
      <div class="timeline-event-time">20th January</div>
    </div>
  </li>
  <li class="timeline-item border-0">
    <span class="timeline-indicator timeline-indicator-info" data-aos="zoom-in" data-aos-delay="200">
      <i class="icon-base ri ri-store-2-line"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <div class="card-header border-0 d-flex justify-content-between">
        <h6 class="card-title mb-0"><span class="align-middle">Online Store</span></h6>
        <i class="icon-base ri ri-more-2-fill cursor-pointer"></i>
      </div>
      <div class="card-body pt-0">
        <p>
          Develop an online store of electronic devices for the provided
          layout, as well as develop a mobile version of it. The must be
          compatible with any CMS.
        </p>
        <div class="d-flex flex-wrap flex-sm-row flex-column">
          <div class="mb-sm-0 mb-4 me-12">
            <p class="text-body-secondary mb-2">Developers</p>
            <div class="d-flex align-items-center">
              <div class="avatar avatar-xs me-2">
                <span class="avatar-initial rounded-circle bg-label-primary">A</span>
              </div>
              <div class="avatar avatar-xs me-2">
                <span class="avatar-initial rounded-circle bg-label-success">B</span>
              </div>
              <div class="avatar avatar-xs">
                <span class="avatar-initial rounded-circle bg-label-danger">C</span>
              </div>
            </div>
          </div>
          <div class="mb-sm-0 mb-4 me-12">
            <p class="text-body-secondary mb-2">Deadline</p>
            <p class="mb-0">20 Dec 2077</p>
          </div>
          <div>
            <p class="text-body-secondary mb-2">Budget</p>
            <p class="mb-0">$50000</p>
          </div>
        </div>
      </div>
      <div class="timeline-event-time">25th January</div>
    </div>
  </li>
</ul>

Modifiers & Variables#

Refer below mentioned for all the modifier classes of timeline

Class	Value
`class="timeline-item border-dashed"`	dashed
`class="timeline-item timeline-item-{color}"`	primary \| secondary \| success \| danger \| warning \| info \| light \| dark \| transparent
`class="timeline-point timeline-point-{color}"`	primary \| secondary \| success \| danger \| warning \| info \| dark
`class="timeline-indicator timeline-indicator-{color}"`	primary \| secondary \| success \| danger \| warning \| info \| dark

Refer below mentioned for all the variables of timeline

Variable	Description
`$timeline-border-color`	Variable for Timeline's border color
`$timeline-item-bg-color`	Variable for Timeline item default bg color
`$timeline-item-border-radius`	Variable for Timeline item's border radius
`$timeline-item-min-height`	Variable for Timeline item's min height
`$timeline-item-padding-x`	Variable for Timeline item's event x axis padding
`$timeline-item-padding-y`	Variable for Timeline item's event y axis padding
`$timeline-event-time-size`	Variable for Timeline event time font size
`$timeline-event-time-color`	Variable for Timeline event time color
`$timeline-point-size`	Variable for Timeline point size
`$timeline-indicator-size`	Variable for Timeline indicator with icon size
`$timeline-point-indicator-color`	Variable for point & indicator timeline's default color
`$timeline-point-indicator-bg-scale`	Variable for Timeline point indicator background opacity

Animate On Scroll#

Animate On Scroll lets you add animation your element when user scroll to it.

Usage#

In order to use Animate on scroll on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="../../assets/vendor/libs/animate-on-scroll/animate-on-scroll.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="../../assets/vendor/libs/animate-on-scroll/animate-on-scroll.js" />

Example#

Using Animate on scroll is really simple all you have to do is initialize it like this: AOS.init() and then you can pass data-aos="ANIMATION_NAME" to the element you want to animate.

This is a primary alert — check it out!

<div class="alert alert-primary" role="alert" data-aos="fade-up">
    This is a primary alert — check it out!
</div>

AOS.init({...options});