<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>{{ people[20].first_name }} {{ people[20].last_name }}</h3>
				<p class="text-secondary mb-0">{{ 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="X" data-bs-toggle="tooltip">
							{% include "ui/icon.html" icon="brand-x" %}
						</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>
