<div class="card">
	<div class="card-body">
		<div class="media">
			{% include ui/avatar.html person-id=8 size="xl" %}
			<div class="media-body ms-4">
				<h3>{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
				<p class="text-muted mb-0">{{ site.data.people[20].job_title }}</p>

				<ul class="social-links list-inline mb-0 mt-2">
					<li class="list-inline-item">
						<a href="#" title="Facebook" data-bs-toggle="tooltip">
							{% include ui/icon.html icon="brand-facebook" %}
						</a>
					</li>
					<li class="list-inline-item">
						<a href="#" title="Twitter" data-bs-toggle="tooltip">
							{% include ui/icon.html icon="brand-twitter" %}
						</a>
					</li>
					<li class="list-inline-item">
						<a href="#" title="1234567890" data-bs-toggle="tooltip">
							{% include ui/icon.html icon="phone" %}
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>