{% assign person-id = include.person-id | default: 20 %}
{% assign person = site.data.people | where: "id", person-id %}
{% assign p = person[0] %}

<div class="card">
    <div class="card-body">
        {% include ui/avatar.html person=p size="xl" status="success" class="mb-3"%}
        <h4 class="mb-0">{{ p.full_name }}</h4>
        <p class="text-muted mb-3">{{ p.job_title }}</p>
        <div class="text-muted">
            {% include ui/icon.html icon="mail" class="mr-1" %}
            <span>{{ p.email }}</span>
        </div>
        <div class="text-muted mb-4">
            {% include ui/icon.html icon="mic" class="mr-1" %}
            <span>{{ p.ssn }}</span>
        </div>
        <div class="d-flex">
            {% include ui/icon.html icon="facebook" class="mr-4" %}
            {% include ui/icon.html icon="twitter" class="mx-4" %}
            {% include ui/icon.html icon="mic" class="mx-4" %}
        </div>
    </div>
</div>