tabler/preview/_includes/cards/timeline.html

<ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
	<li class="timeline-event">
		<div class="timeline-event-icon bg-twitter-lt">{% include ui/icon.html icon="brand-twitter" %}</div>
		<div class="card timeline-event-card">
			<div class="card-body">
				<div class="text-secondary float-end">10 hrs ago</div>
				<h4>+1150 Followers</h4>
				<p class="text-secondary">You’re getting more and more followers, keep it up!</p>
			</div>
		</div>
	</li>
	<li class="timeline-event">
		<div class="timeline-event-icon">{% include ui/icon.html icon="briefcase" %}</div>
		<div class="card timeline-event-card">
			<div class="card-body">
				<div class="text-secondary float-end">2 hrs ago</div>
				<h4>+3 New Products were added!</h4>
				<p class="text-secondary">Congratulations!</p>
			</div>
		</div>
	</li>
	<li class="timeline-event">
		<div class="timeline-event-icon">{% include ui/icon.html icon="check" %}</div>
		<div class="card timeline-event-card">
			<div class="card-body">
				<div class="text-secondary float-end">1 day ago</div>
				<h4>Database backup completed!</h4>
				<p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
			</div>
		</div>
	</li>
	<li class="timeline-event">
		<div class="timeline-event-icon bg-facebook-lt">{% include ui/icon.html icon="brand-facebook" %}</div>
		<div class="card timeline-event-card">
			<div class="card-body">
				<div class="text-secondary float-end">1 day ago</div>
				<h4>+290 Page Likes</h4>
				<p class="text-secondary">This is great, keep it up!</p>
			</div>
		</div>
	</li>
	<li class="timeline-event">
		<div class="timeline-event-icon">{% include ui/icon.html icon="user-plus" %}</div>
		<div class="card timeline-event-card">
			<div class="card-body">
				<div class="text-secondary float-end">2 days ago</div>
				<h4>+3 Friend Requests</h4>
				<div class="avatar-list mt-3">
					{% for person in site.data.people limit: 3 %}
					{% include ui/avatar.html person=person status="success" %}
					{% endfor %}
				</div>
			</div>
		</div>
	</li>
	<li class="timeline-event">
		<div class="timeline-event-icon">{% include ui/icon.html icon="photo" %}</div>
		<div class="card timeline-event-card">
			<div class="card-body">
				<div class="text-secondary float-end">3 days ago</div>
				<h4>+2 New photos</h4>
				<div class="mt-3">
					<div class="row g-2">
						<div class="col-6">
							<div class="media media-2x1 rounded">
								<a class="media-content" style="background-image: url({% include ui/image.html id=6 %})"></a>
							</div>
						</div>
						<div class="col-6">
							<div class="media media-2x1 rounded">
								<a class="media-content" style="background-image: url({% include ui/image.html id=7 %})"></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
	<li class="timeline-event">
		<div class="timeline-event-icon">{% include ui/icon.html icon="settings" %}</div>
		<div class="card timeline-event-card">
			<div class="card-body">
				<div class="text-secondary float-end">2 weeks ago</div>
				<h4>System updated to v2.02</h4>
				<p class="text-secondary">Check the complete changelog at the <a href="#">activity
					page</a>.</p>
			</div>
		</div>
	</li>
</ul>