<div class="supt-card-people">
<div class="supt-card-people__head">
<img src="/sites/gv/files/flmngr/superhuit/leadership/austin-lally.webp" alt="Austin Lally" />
</div>
<div class="supt-card-people__body">
<div class="supt-card-people__content">
<h3 class="supt-card-people__name">Austin Lally</h3>
<p class="supt-card-people__role">Chief Executive Officer</p>
</div>
<a href="#austin-lally" class="supt-button-link ">
<span>
Read more
<svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</span>
</a>
</div>
</div>
No notes defined.
<div class="supt-card-people">
<div class="supt-card-people__head">
<img src="{{ path(image.src) }}" alt="{{ image.alt }}" />
</div>
<div class="supt-card-people__body">
<div class="supt-card-people__content">
<h3 class="supt-card-people__name">{{ name }}</h3>
<p class="supt-card-people__role">{{ role }}</p>
</div>
{% if link %}
{% include "atoms/buttons/button-link/button-link.twig" with link|merge({ text: link.text|default("Read more")}) only %}
{% endif %}
</div>
</div>
/* No context defined. */
.supt-card-people {
@mixin card-hover .supt-card-people;
display: flex;
flex-direction: column;
gap: $spacing-4;
&__head {
border-radius: 50%;
background-color: $color-grey-2;
img {
display: block;
aspect-ratio: 1/1;
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: $spacing-4;
}
&__content {
display: flex;
flex-direction: column;
gap: $spacing-1;
padding-right: $spacing-2;
@media (min-width: $breakpoint-md) {
gap: $spacing-2;
padding-right: $spacing-6;
}
}
&__name {
@extend %t-h4;
margin: 0;
}
&__role {
@extend %t-body-s;
color: $color-grey-5;
}
}