Overview
Anim
Layout
Forms
Components
Accordion
Alerts
Avatar
Badge
Breadcrumb
Buttons
Button group
Close button
Calendar
Card
Caret
Carousel
Classified
Dropdowns
List
Loader
Modal
Navbar
Nav | Pills
Nav | Tabs
Pagination
Placeholders
Progress
Rating
Scrollbar
Sidenav
Spinners
Tables
Timeline
Toasts
Tooltips
TreeView
Utilities

Timeline

The timeline displays a list of events in chronological order.

UsageNg Timeline

Basic example

Timeline

Default

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Timeline

Inverted

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

    <div class="Timeline">
      <div class="Timeline-header">
        <h2>Timeline (Base)</h2>
        <p>Description</p>
      </div>
      <div class="Timeline-item" [class.First]="first" [class.Last]="last"
           *ngFor="let _ of [1,2,3]; let first=first; let last=last;">
        <div class="Timeline-badge">
          <div class="Circle Border">
            <div class="Centered Bg-red Fg-light">
              <i class="fas fa-gift"></i>
            </div>
          </div>
        </div>
        <div class="Timeline-content">
          <div class="Card Card-horizontal Caret-start">
            <div class="Card-body">
              <h5 class="Card-title">Card title</h5>
              <p class="Card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            </div>
          </div>
        </div>
      </div>
    </div>