<div class="card">
	<div class="card-header">
		<h3 class="card-title">{{ include.title | default: 'Timeline' }}</h3>
	</div>
	<div class="card-body">
		<ul class="list list-timeline{% if include.simple %} list-timeline-simple{% endif %}">
			<li>
				<div class="list-timeline-icon bg-twitter">{% include ui/icon.html icon="brand-twitter" %}</div>
				<div class="list-timeline-content">
					<div class="list-timeline-time">10 hrs ago</div>
					<p class="list-timeline-title">+1150 Followers</p>
					<p class="text-muted">You’re getting more and more followers, keep it up!</p>
				</div>
			</li>
			<li>
				<div class="list-timeline-icon bg-red">{% include ui/icon.html icon="briefcase" %}</div>
				<div class="list-timeline-content">
					<div class="list-timeline-time">2 hrs ago</div>
					<p class="list-timeline-title">+3 New Products were added!</p>
					<p class="text-muted">Congratulations!</p>
				</div>
			</li>
			<li>
				<div class="list-timeline-icon bg-success">{% include ui/icon.html icon="check" %}</div>
				<div class="list-timeline-content">
					<div class="list-timeline-time">1 day ago</div>
					<p class="list-timeline-title">Database backup completed!</p>
					<p class="text-muted">Download the <a href="#">latest backup</a>.</p>
				</div>
			</li>
			<li>
				<div class="list-timeline-icon bg-facebook">{% include ui/icon.html icon="brand-facebook" %}</div>
				<div class="list-timeline-content">
					<div class="list-timeline-time">1 day ago</div>
					<p class="list-timeline-title">+290 Page Likes</p>
					<p class="text-muted">This is great, keep it up!</p>
				</div>
			</li>
			<li>
				<div class="list-timeline-icon bg-teal">{% include ui/icon.html icon="user-plus" %}</div>
				<div class="list-timeline-content">
					<div class="list-timeline-time">2 days ago</div>
					<p class="list-timeline-title">+3 Friend Requests</p>
					<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>
			</li>
			<li>
				<div class="list-timeline-icon bg-yellow">{% include ui/icon.html icon="photo" %}</div>
				<div class="list-timeline-content">
					<div class="list-timeline-time">3 days ago</div>
					<p class="list-timeline-title">+2 New photos</p>
					<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>
			</li>
			<li>
				<div class="list-timeline-icon">{% include ui/icon.html icon="settings" %}</div>
				<div class="list-timeline-content">
					<div class="list-timeline-time">2 weeks ago</div>
					<p class="list-timeline-title">System updated to v2.02</p>
					<p class="text-muted">Check the complete changelog at the <a href="#">activity
						page</a>.</p>
				</div>
			</li>
		</ul>
	</div>
</div>
