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 two 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.

  • Get on the flight
    3rd October
    Charles de Gaulle Airport, Paris Heathrow Airport, London
    6:30 AM
    img booking-card.pdf
  • Design Review
    4th October

    Weekly review of freshly prepared design for our new application.

    New Application
    Avatar
    Avatar
  • Shoe img
    Sold Puma POPX Blue Color
    5th October

    PUMA presents the latest shoes from its collection. Light & comfortable made with highly durable material.

    Customer

    Micheal Scott

    Price

    $375.00

    Quantity

    1
  • Interview Schedule
    6th October

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus quos, voluptates voluptas rem veniam expedita.


    Avatar

    Rebecca Godman

    Javascript Developer
  • 2 Notifications
    7th October
      • Avatar
      • Avatar
      • Avatar
      Commented on your post.
    • avatar
      $20
<ul class="timeline 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 border-bottom mb-4">
        <h6 class="mb-0">Get on the flight</h6>
        <span class="text-muted">3rd October</span>
      </div>
      <div class="d-flex justify-content-between flex-wrap mb-2">
        <div>
          <span>Charles de Gaulle Airport, Paris</span>
          <span class="d-inline-flex scaleX-n1-rtl align-middle"><i class="ri-arrow-right-line mx-4"></i></span>
          <span>Heathrow Airport, London</span>
        </div>
        <div>
          <span class="text-muted">6:30 AM</span>
        </div>
      </div>
      <div class="d-flex align-items-center">
        <img src="assets/img/icons/misc/pdf.png" alt="img" width="28" class="me-2">
        <span class="h6 mb-0">booking-card.pdf</span>
      </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-sm-0 mb-4">
        <h6 class="mb-0">Design Review</h6>
        <span class="text-muted">4th October</span>
      </div>
      <p>
        Weekly review of freshly prepared design for our new
        application.
      </p>
      <div class="d-flex justify-content-between">
        <h6>New Application</h6>
        <div class="d-flex">
          <div class="avatar avatar-xs me-2">
            <img src="assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div class="avatar avatar-xs">
            <img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-danger"></span>
    <div class="timeline-event">
      <div class="d-flex flex-sm-row flex-column">
        <img src="assets/img/elements/16.jpg" class="rounded me-4" alt="Shoe img" height="62" width="62" />
        <div>
          <div class="timeline-header flex-wrap mb-2 mt-4 mt-sm-0">
            <h6 class="mb-0">Sold Puma POPX Blue Color</h6>
            <span class="text-muted">5th October</span>
          </div>
          <p>
            PUMA presents the latest shoes from its collection. Light &
            comfortable made with highly durable material.
          </p>
        </div>
      </div>
      <div class="d-flex justify-content-between flex-wrap flex-sm-row flex-column text-sm-center">
        <div class="customer mb-sm-0 mb-2">
          <p class="mb-0">Customer</p>
          <span class="text-muted">Micheal Scott</span>
        </div>
        <div class="price mb-sm-0 mb-2">
          <p class="mb-0">Price</p>
          <span class="text-muted">$375.00</span>
        </div>
        <div class="price">
          <p class="mb-0">Quantity</p>
          <span class="text-muted">1</span>
        </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">
        <h6 class="mb-0">Interview Schedule</h6>
        <span class="text-muted">6th October</span>
      </div>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Possimus quos, voluptates voluptas rem veniam expedita.
      </p>
      <hr />
      <div class="d-flex justify-content-between flex-wrap gap-2">
        <div class="d-flex flex-wrap">
          <div class="avatar me-4">
            <img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div>
            <p class="mb-0">Rebecca Godman</p>
            <span class="text-muted">Javascript Developer</span>
          </div>
        </div>
        <div class="d-flex flex-wrap align-items-center cursor-pointer">
          <i class="ri-chat-4-line me-6"></i>
          <i class="ri-phone-fill"></i>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent border-transparent">
    <span class="timeline-point timeline-point-warning"></span>
    <div class="timeline-event">
      <div class="timeline-header">
        <h6 class="mb-0">2 Notifications</h6>
        <span class="text-muted">7th October</span>
      </div>
      <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 my-4 me-2">
              <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>
            </ul>
              <span>Commented on your post.</span>
            </div>
            <button class="btn btn-outline-primary btn-sm my-sm-0 my-4">
              View
            </button>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap pb-0 px-0">
            <div class="d-flex align-items-center">
              <img src="assets/img/avatars/4.png" class="rounded-circle me-4" alt="avatar"
              height="24" width="24" />
              <div class="user-info">
                <p class="my-0">Dwight repaid you</p>
                <span class="text-muted">30 minutes ago</span>
              </div>
            </div>
            <h5 class="mb-0">$20</h5>
          </li>
        </ul>
      </div>
    </li>
  </ul>

Timeline Outlined

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

  • Get on the flight
    3rd October
    Charles de Gaulle Airport, Paris Heathrow Airport, London
    6:30 AM
    img booking-card.pdf
  • Design Review
    4th October

    Weekly review of freshly prepared design for our new application.

    New Application
    Avatar
    Avatar
  • Shoe img
    Sold Puma POPX Blue Color
    5th October

    PUMA presents the latest shoes from its collection. Light & comfortable made with highly durable material.

    Customer

    Micheal Scott

    Price

    $375.00

    Quantity

    1
  • Interview Schedule
    6th October

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus quos, voluptates voluptas rem veniam expedita.


    Avatar

    Rebecca Godman

    Javascript Developer
  • 2 Notifications
    7th October
      • Avatar
      • Avatar
      • Avatar
      Commented on your post.
    • avatar
      $20
                <ul class="timeline timeline-outline mb-0">
  <li class="timeline-item timeline-item-transparent border-left-dashed">
    <span class="timeline-point timeline-point-primary"></span>
    <div class="timeline-event">
      <div class="timeline-header border-bottom mb-4">
        <h6 class="mb-0">Get on the flight</h6>
        <span class="text-muted">3rd October</span>
      </div>
      <div class="d-flex justify-content-between flex-wrap mb-2">
        <div>
          <span>Charles de Gaulle Airport, Paris</span>
          <span class="d-inline-flex scaleX-n1-rtl align-middle">
            <i class="ri-arrow-right-line mx-4"></i>
          </span>
          <span>Heathrow Airport, London</span>
        </div>
        <div>
          <span class="text-muted">6:30 AM</span>
        </div>
      </div>
      <div class="d-flex align-items-center">
        <img src="assets//img/icons/misc/pdf.png" alt="img" width="28" class="me-2">
        <span class="h6 mb-0">booking-card.pdf</span>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent border-left-dashed">
    <span class="timeline-point timeline-point-success"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-sm-0 mb-4">
        <h6 class="mb-0">Design Review</h6>
        <span class="text-muted">4th October</span>
      </div>
      <p>
        Weekly review of freshly prepared design for our new
        application.
      </p>
      <div class="d-flex justify-content-between">
        <h6>New Application</h6>
        <div class="d-flex">
          <div class="avatar avatar-xs me-2">
            <img src="assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div class="avatar avatar-xs">
            <img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent border-left-dashed">
    <span class="timeline-point timeline-point-danger"></span>
    <div class="timeline-event">
      <div class="d-flex flex-sm-row flex-column">
        <img src="assets/img/elements/16.jpg" class="rounded me-4" alt="Shoe img" height="62" width="62" />
        <div>
          <div class="timeline-header flex-wrap mb-2 mt-4 mt-sm-0">
            <h6 class="mb-0">Sold Puma POPX Blue Color</h6>
            <span class="text-muted">5th October</span>
          </div>
          <p>
            PUMA presents the latest shoes from its collection. Light &
            comfortable made with highly durable material.
          </p>
        </div>
      </div>
      <div class="d-flex justify-content-between flex-wrap flex-sm-row flex-column text-sm-center">
        <div class="customer mb-sm-0 mb-2">
          <p class="mb-0">Customer</p>
          <span class="text-muted">Micheal Scott</span>
        </div>
        <div class="price mb-sm-0 mb-2">
          <p class="mb-0">Price</p>
          <span class="text-muted">$375.00</span>
        </div>
        <div class="price">
          <p class="mb-0">Quantity</p>
          <span class="text-muted">1</span>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent border-left-dashed">
    <span class="timeline-point timeline-point-info"></span>
    <div class="timeline-event">
      <div class="timeline-header">
        <h6 class="mb-0">Interview Schedule</h6>
        <span class="text-muted">6th October</span>
      </div>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Possimus quos, voluptates voluptas rem veniam expedita.
      </p>
      <hr />
      <div class="d-flex justify-content-between flex-wrap gap-2">
        <div class="d-flex flex-wrap">
          <div class="avatar me-4">
            <img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div>
            <p class="mb-0">Rebecca Godman</p>
            <span class="text-muted">Javascript Developer</span>
          </div>
        </div>
        <div class="d-flex flex-wrap align-items-center cursor-pointer">
          <i class="ri-chat-4-line me-6"></i>
          <i class="ri-phone-fill"></i>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent border-transparent">
    <span class="timeline-point timeline-point-warning"></span>
    <div class="timeline-event">
      <div class="timeline-header">
        <h6 class="mb-0">2 Notifications</h6>
        <span class="text-muted">7th October</span>
      </div>
      <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 my-4 me-2">
              <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>
            </ul>
            <span>Commented on your post.</span>
          </div>
          <button class="btn btn-outline-primary btn-sm my-sm-0 my-4">
            View
          </button>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap pb-0 px-0">
          <div class="d-flex align-items-center">
            <img src="assets/img/avatars/4.png" class="rounded-circle me-4" alt="avatar" height="24" width="24" />
            <div class="user-info">
              <p class="my-0">Dwight repaid you</p>
              <span class="text-muted">30 minutes ago</span>
            </div>
          </div>
          <h5 class="mb-0">$20</h5>
        </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.

  • 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

    • Avatar
    • Avatar
    • Avatar
    • Avatar
    1st January
  • Survey Report
    Avatar
    assigned this task to Sarah
    • Avatar
      Jquery
    • Avatar
      React React React React
    • Avatar
      Angular
    • Avatar
      VUE
    • Avatar
      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
    doughnut
    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?

    12th January
  • Gym Program
    5:00 - 6:10AM
    1.1 Hours Weekly
    Rock's Gym
    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 mt-12">
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
      <i class="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-muted 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="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-4">
              <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 bg-label-danger" 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 bg-label-warning" 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 bg-label-info" 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 bg-label-success" 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="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 : $20000</span>
              <i class="ri-share-line cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> This Years's Profit : $25000</span>
              <i class="ri-share-line cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> Last Years's Commission : $5000</span>
              <i class="ri-share-line cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> This Years's Commission : $7000</span>
              <i class="ri-share-line cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span>
                This Years's Total Balance : $70000</span>
              <i class="ri-share-line cursor-pointer"></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="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/13.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="ri-star-fill text-warning"></i>
                <i class="ri-star-fill text-warning"></i>
                <i class="ri-star-fill text-warning"></i>
                <i class="ri-star-fill text-warning"></i>
                <i class="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="ri-map-pin-line"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <div class="card-header d-flex justify-content-between">
        <h6 class="card-title mb-0">
          <i class="ri-map-pin-line"></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 align-items-center flex-wrap cursor-pointer gap-4">
          <i class="ri-links-line"></i>
          <div class="position-relative">
            <i class="ri-chat-4-line"></i>
            <span class="badge rounded-pill bg-info badge-dot badge-notifications"></span>
          </div>
          <i class="ri-chat-4-line"></i>
        </div>
        <p class="mb-0">
          <span class="text-muted">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="ri-open-arm-line"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <div class="card-header d-flex justify-content-between">
        <h6 class="card-title mb-0">Gym Program</h6>
        <span class="text-muted">5:00 - 6:10AM</span>
      </div>
      <div class="card-body pb-4 pt-0">
        <div class="hours mb-2">
          <i class="ri-time-line"></i>
          <span>1.1 Hours</span>
          <i class="ri-arrow-left-right-line mx-2"></i>
          <span>Weekly</span>
        </div>
        <div class="location">
          <i class="ri-map-pin-line"></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="ri-more-2-line 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="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="ri-money-dollar-circle-line ri-24px me-4"></i>
            <div class="ps-3 border-start">
              <small class="text-muted 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="ri-bank-card-2-line ri-24px me-4"></i>
            <div class="ps-3 border-start">
              <small class="text-muted 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="ri-line-chart-line ri-24px me-4"></i>
            <div class="ps-3 border-start">
              <small class="text-muted 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="ri-server-fill"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <div class="card-header 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="ri-global-line"></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="ri-cpu-line"></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="ri-ram-2-fill"></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="ri-share-line me-2"></i>
          <i class="ri-loop-left-line"></i>
        </div>
      </div>
      <div class="timeline-event-time">20th January</div>
    </div>
  </li>
  <li class="timeline-item border-transparent pb-2">
    <span class="timeline-indicator timeline-indicator-info" data-aos="zoom-in" data-aos-delay="200">
      <i class="ri-store-2-line"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <div class="card-header d-flex justify-content-between">
        <h6 class="card-title mb-0"><span class="align-middle">Online Store</span></h6>
        <i class="ri-more-2-line 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-muted 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-muted mb-2">Deadline</p>
            <p class="mb-0">20 Dec 2077</p>
          </div>
          <div>
            <p class="text-muted 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-left-dashed" dashed
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-color Variable for point & indicator timeline's default color
$timeline-point-indicator-bg-scale Variable for indicator timeline's background color scale

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.

<div class="alert alert-primary" role="alert" data-aos="fade-up">
    This is a primary alert — check it out!
</div>
AOS.init({...options});
© 2017- ThemeSelection, Hand-crafted & Made with ❤️