The timeline displays a list of events in chronological order.
UsageNg Timeline
Default
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Inverted
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
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>