A small block of information about an author, contact, or user.
<div class="shrink-0 group block hover:no-underline">
<div class="flex items-start space-x-3 mr-6">
<div class="flex shrink-0 justify-center items-center h-9 w-9 rounded-full bg-tertiary-200 text-tertiary-900">
<div class="fill-current w-5 h-5 md:w-6 md:h-6" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="7" r="4"></circle>
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
</svg>
</div>
</div>
<div class="flex shrink flex-col space-y-0.5">
<div class="azalea-heading-level-6 text-black">
Jane Doe
</div>
<div class="azalea-text-xs text-tertiary-600">
Web & Digital Products Lead
</div>
</div>
</div>
</div>
{% set tag = data.path ? 'a' : 'div' %}
<{{ tag}} {% if tag is same as('a') %}href="{{ data.path }}" {% endif %}class="shrink-0 group block hover:no-underline">
<div class="flex items-start space-x-3 mr-6">
{% if data.image %}
<div class="flex shrink-0 justify-center items-center">
{% include "@components/image/image.twig" with { data: data.image, use: 'small_square', classes: ['w-9', 'h-9', 'rounded-full'] } only %}
</div>
{% else %}
<div class="flex shrink-0 justify-center items-center h-9 w-9 rounded-full bg-tertiary-200 text-tertiary-900">
{% include "@components/icon/icon.twig" with { icon: 'user', size: 'small' } %}
</div>
{% endif %}
<div class="flex shrink flex-col space-y-0.5">
<div class="azalea-heading-level-6 text-black">
{{ data.displayName }}
</div>
{% if data.professionalTitle %}
<div class="azalea-text-xs text-tertiary-600">
{{ data.professionalTitle }}
</div>
{% endif %}
{# Prop type #}
{% if type == 'contact' %}
{% if data.email %}
<a class="flex items-center text-sm text-tertiary-500" href="mailto:{{ data.email }}">
<span class="mr-1.5">{% include "@components/icon/icon.twig" with { icon: 'mail', size: 'xsmall' } only %}</span>
<span>{{ data.email }}</span>
</a>
{% endif %}
{% if data.telephone %}
<a class="flex items-center text-sm text-tertiary-500" href="tel:{{ data.telephone }}">
<span class="mr-1.5">{% include "@components/icon/icon.twig" with { icon: 'phone', size: 'xsmall' } only %}</span>
<span class="leading-tight">{{ data.telephone }}</span>
</a>
{% endif %}
{% endif %}
</div>
</div>
</{{ tag }}>