<a href="#" class="c-person c-person--small c-person--ratio-1-1">
<div class="c-person__image-block">
<img class="c-person__image" src="/images/luca.jpg" srcset="/images/luca.jpg" sizes="100vw" alt="John Doe" loading="eager" />
</div>
<div class="c-person__info">
<p class="c-person__name">John Doe</p>
<p class="c-person__role">Service & Experience Designer</p>
</div>
</a>
{% if url %}
<a href="{{ url }}" class="c-person{% if modifier is defined %} {{ modifier }}{% endif %}">
{% else %}
<div class="c-person{% if modifier is defined %} {{ modifier }}{% endif %}">
{% endif %}
{% if personImage %}
<div class="c-person__image-block">
<img class="c-person__image"
src="{{ personImage.src|default("") }}"
srcset="{{ personImage.srcset|default("") }}"
sizes="100vw"
alt="{{ personImage.alt|default("") }}"
loading="{{ personImage.lazyloading|default("eager") }}"
/>
</div>
{% endif %}
<div class="c-person__info">
{% if area is defined %}
<p class="c-person__area">{{ area }}</p>
{% endif %}
<p class="c-person__name">{{ name }}</p>
<p class="c-person__role">{{ role }}</p>
{% if email is defined %}
<a class="c-person__contact" href="mailto:{{ email }}">{{ email }}</a>
{% endif %}
{% if phone is defined %}
<a class="c-person__contact" href="tel:{{ phone }}">{{ phone }}</a>
{% endif %}
</div>
{% if url %}
</a>
{% else %}
</div>
{% endif %}
{
"modifier": "c-person--small c-person--ratio-1-1",
"url": "#",
"personImage": {
"src": "/images/luca.jpg",
"srcset": "/images/luca.jpg",
"alt": "John Doe"
},
"name": "John Doe",
"role": "Service & Experience Designer"
}
.c-person {
display: block;
text-decoration: none;
}
.c-person__image-block {
margin-bottom: spacing(space-8);
@supports not (aspect-ratio: 16 / 9) {
position: relative;
height: 0;
padding-top: 133%;
}
}
.c-person__image {
aspect-ratio: 3 / 4;
@include aspect-ratio-fallback;
object-fit: cover;
object-position: top;
// Firefox fix: https://stackoverflow.com/a/70160430
width: 100%;
max-height: 100%;
}
.c-person__name {
display: block;
@include font-scale(level-3, $font-primary, extrabold);
color: useHSL(--primary-100);
margin-bottom: spacing(space-4);
text-decoration: underline;
}
.c-person__role,
.c-person__contact {
@include font-scale(level-1, $font-secondary, regular);
color: useHSL(--primary-100);
}
.c-person__contact {
display: block;
margin-top: spacing(space-4);
}
a.c-person:hover,
a.c-person:focus-within {
.c-person__name {
color: useHSL(--accent-100);
}
}
/*------------------------------------*
Contributor
*------------------------------------*/
.c-person--contributor {
&:hover .c-person__name {
color: useHSL(--primary-100);
}
.c-person__name {
text-decoration: none;
}
}
/*------------------------------------*
Ratio 1:1
*------------------------------------*/
.c-person--ratio-1-1 {
.c-person__image-block {
@supports not (aspect-ratio: 16 / 9) {
position: relative;
height: 0;
padding-top: 100%;
}
}
.c-person__image {
aspect-ratio: 1 / 1;
@include aspect-ratio-fallback;
}
}
/*------------------------------------*
Small
*------------------------------------*/
.c-person--small {
display: flex;
align-items: center;
.c-person__image-block {
flex: 0 0 auto;
margin-bottom: 0;
}
.c-person__image {
width: remify(130px);
}
.c-person__info {
margin-left: spacing(space-12);
@include min-screen(bp(large)) {
margin-left: spacing(space-24);
}
}
}
/*------------------------------------*\
Area
\*------------------------------------*/
.c-person--area {
align-items: flex-start;
.c-person__area {
@include font-scale(level-6, $font-primary, extrabold);
color: useHSL(--primary-100);
margin-bottom: spacing(space-4);
}
.c-person__name,
.c-person__role,
.c-person__contact {
@include font-scale(level-5, $font-primary, regular);
}
.c-person__name {
margin-bottom: 0;
text-decoration: none;
}
.c-person__image {
width: remify(100px);
}
}
No notes defined.