By default, content shows in zig-zag mode. Apply .timeline-content-leftor .timeline-content-rightto your .timelineto place timeline-content in left or right respectively.
Content position
-
Maryam Amiriupdated her status
-
Hosseinsent you friend request. -
Hosseintwitted! -
Maryamposted a new photo
-
Important messageCPU usage went above 80% -
New hit in page views
6,374Increase in page views
1,8,6,5,6,8,7,9,7,8,10,16 -
New blog post
-
New photos added to the gallery
Timeline component is highly customizeable. Following example showcases variety of timeline blocks that you may want to use.
You may change width of the timeline point which is the centered line in this example. You can apply .timeline-point-*to the .timelinewhich *can be xs, sm, lg, or xl.
Timeline size
- .timeline-content
-
You might place anything inside a
.timeline-content -
You might want to place your content inside a
.card - .timeline-detail
-
Christmas Day.timeline-detailis a container, so you can place almost anything inside it. But you might usually need a time and a description. -
You may want to ignore .timeline-detailand place your time inside the .timeline-content; below or above a card.
- .timeline-point
Basically you can put anything inside a .timeline-point. Here you can see common usage of a timeline-point. -
A
.badge-dot -
A
.badge-dotwith.badge-xl -
A
.badge-ring -
Line color
.timeline-point-*applies to .timeline-pointwhich*is a color name. -
An iconic avatar
-
An image avatar