tabler/preview/pages/_includes/cards/timeline.html

<ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
	<li class="timeline-event">
		<div class="timeline-event-icon bg-x-lt">{% include "ui/icon.html" icon="brand-x" %}</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 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>+3 New photos</h4>
				<div class="mt-3">
					<div class="row g-2">
						<div class="col-4">
							{% include "ui/photo.html" id=6 class="rounded" %}
						</div>
						<div class="col-4">
							{% include "ui/photo.html" id=7 class="rounded" %}
						</div>
						<div class="col-4">
							{% include "ui/photo.html" id=8 class="rounded" %}
						</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>