Ng - Timeline
Styled byLS Timeline
Side
Timeline
Default
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Timeline
Inverted
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
<Timeline [Anim]="'Shake'">
<div class="Timeline-header">
<h2>Timeline</h2>
<p>Description</p>
</div>
<TimelineItem>
<div class="Timeline-badge">
<Avatar [BgColor]="'red'" [qlTooltip]="'Avatar'"><i class="Fg-light fa-regular fa-paper-plane"></i></Avatar>
</div>
<Card [Orientation]="'Horizontal'" [Caret]="'left'">
<h5 class="Border-bottom">Title</h5>
<p> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
</Card>
</TimelineItem>
<TimelineItem>
<div class="Timeline-badge">
<Avatar [BgColor]="'blue'"><i class="Fg-light fa-solid fa-gift"></i></Avatar>
</div>
<Card [Orientation]="'Horizontal'" [Caret]="'left'">
<h5 class="Border-bottom">Title</h5>
<p> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
</Card>
</TimelineItem>
</Timeline>
<Timeline [Anim]="'Shake'">
<div class="Timeline-header">
<h2>Timeline</h2>
<p>Description</p>
</div>
<TimelineItem [Inverted]="true">
<div class="Timeline-badge">
<Avatar [BgColor]="'red'"><i class="Fg-light fa-regular fa-paper-plane"></i></Avatar>
</div>
<Card [Orientation]="'Horizontal'" [Caret]="'right'">
<h5 class="Border-bottom">Title</h5>
<p> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
</Card>
</TimelineItem>
<TimelineItem [Inverted]="true">
<div class="Timeline-badge">
<Avatar [BgColor]="'blue'"><i class="Fg-light fa-solid fa-gift"></i></Avatar>
</div>
<Card [Orientation]="'Horizontal'" [Caret]="'right'">
<h5 class="Border-bottom">Title</h5>
<p> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
</Card>
</TimelineItem>
</Timeline>
Centered
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
<Timeline [Layout]="'Centered'" [Anim]="'Shake'">
<TimelineItem>
<div class="Timeline-badge">
<Avatar [BgColor]="'red'" [qlTooltip]="'Avatar'"><i class="Fg-light fa-regular fa-paper-plane"></i></Avatar>
</div>
<Card [Caret]="'right'">
<h5 class="Border-bottom">Title</h5>
<p> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
</Card>
</TimelineItem>
<TimelineItem [Inverted]="true">
<div class="Timeline-badge">
<Avatar [BgColor]="'blue'"><i class="Fg-light fa-solid fa-gift"></i></Avatar>
</div>
<Card [Caret]="'left'">
<div class="Card-img">
<Carousel [Dummy]="true" [Captions]="false" [NavigationIndicators]="false"></Carousel>
</div>
<h5 class="Border-bottom">Title</h5>
<p> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
</Card>
</TimelineItem>
</Timeline>
Connected
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
<Timeline [Layout]="'Connected'" [Anim]="'Shake'">
<TimelineItem>
<div class="Timeline-badge">
<Avatar [BgColor]="'red'" [qlTooltip]="'Avatar'"><i class="Fg-light fa-regular fa-paper-plane"></i></Avatar>
</div>
<Card [Caret]="'left'">
<h5 class="Border-bottom">Title</h5>
<p> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
</Card>
</TimelineItem>
<TimelineItem [Inverted]="true">
<div class="Timeline-badge">
<Avatar [BgColor]="'blue'"><i class="Fg-light fa-solid fa-gift"></i></Avatar>
</div>
<Card [Caret]="'right'">
<h5 class="Border-bottom">Title</h5>
<p> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
</Card>
</TimelineItem>
<TimelineItem>
<div class="Timeline-badge">
<Avatar [BgColor]="'orange'" [qlTooltip]="'Avatar'"><i class="Fg-light fa-solid fa-pizza-slice"></i></Avatar>
</div>
<Card [Caret]="'left'">
<h5 class="Border-bottom">Title</h5>
<p> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
</Card>
</TimelineItem>
</Timeline>
Animations
Shake
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Wobble
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Jello
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Rubber-band
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
<Timeline [Anim]="'Shake'">
<Timeline [Anim]="'Wobble'">
<Timeline [Anim]="'Jello'">
<Timeline [Anim]="'Rubber-band'">