<article class="card-with-image">
<div class="card-with-image__image">
<picture class="profile-card__picture">
<source srcset="https://placekitten.com/200/200" type="image/webp">
<img class="profile-card__image" src="https://placekitten.com/200/200" data-cy="profile-card__image" alt='friendly kitten' style="object-position: 50% 50%;" />
</picture>
</div>
<div class="card-with-image__content">
<div class="profile-card__title">
<h3 class="linked-title linked-title--h3">
<a href="#" class="linked-title__link">
<span class="linked-title__link-text">Wendy D. Sanchez</span>
</a>
</h3>
</div>
<div class="profile-card__current">
<div class="profile-card__titles">
Dr.
</div>
</div>
<div class="profile-card__units">
<div class="unit-list">
<ul class="unit-list__list">
<li class="unit-list__unit">Deans Office</li>
<span class="unit-list__separator">•</span>
<li class="unit-list__unit">School of Music</li>
</ul>
</div>
</div>
<div class="profile-card__contact">
<div class="profile-card__contact-email">
<span class="profile-card__contact-email-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g id="mail">
<mask id="mask0_4863_41353" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4863_41353)">
<path id="mail_2" d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L4 8V18H20V8L12 13ZM12 11L20 6H4L12 11ZM4 8V6V18V8Z" fill="#162F93" />
</g>
</g>
</svg>
</span>
<a href="mailto:WendyDSanchez@teleworm.us" class="profile-card__contact-email-link">
WendyDSanchez@teleworm.us
</a>
</div>
</div>
</div>
</article>
{% extends 'templates/card-with-image/card-with-image.twig' %}
{% block image %}
<picture class="profile-card__picture">
<source srcset="{{ post.featuredImage.src | resize(848) | towebp }}" type="image/webp">
<img class="profile-card__image" src="{{ post.featuredImage.src }}"
data-cy="profile-card__image"
alt='{{ post.featuredImage.altText ?: 'Alt text' }}'
style="object-position: {{ post.featuredImage.focalPoint.x}}% {{ post.featuredImage.focalPoint.y }}%;"
/>
</picture>
{% endblock %}
{% block text %}
<div class="profile-card__title">
{% include 'bits/linked-title/linked-title.twig' with {
headingLevel: 3,
text: post.fullName,
url: post.permalink,
}%}
</div>
{% if post.titles %}
<div class="profile-card__current">
<div class="profile-card__titles">
{{ post.titles }}
{% if post.title2 %}
<br>{{ post.title2 }}
{% endif %}
</div>
</div>
{% endif %}
{% if post.units %}
<div class="profile-card__units">
{% include 'partials/unit-list/unit-list.twig' with {
units: post.units
}%}
</div>
{% endif %}
{% if post.emailAddress or post.phoneNumber %}
<div class="profile-card__contact">
{% if post.emailAddress %}
<div class="profile-card__contact-email">
<span class="profile-card__contact-email-icon">{% include 'bits/icons/mail.twig' %}</span>
<a href="mailto:{{ post.emailAddress }}" class="profile-card__contact-email-link">
{{ post.emailAddress }}
</a>
</div>
{% endif %}
</div>
{% endif %}
{% if post.tags and includeTags %}
<div class="profile-card__tags">
{% include 'partials/tag-list/tag-list.twig' with {
tags: post.tags
}%}
</div>
{% endif %}
{% endblock %}
{
"post": {
"fullName": "Wendy D. Sanchez",
"titles": "Dr.",
"featuredImage": {
"src": "https://placekitten.com/200/200",
"altText": "friendly kitten",
"focalPoint": {
"x": 50,
"y": 50
}
},
"emailAddress": "WendyDSanchez@teleworm.us",
"permalink": "#",
"tags": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
}
],
"units": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
}
]
},
"includeTags": false
}
.profile-card
--titleColor blue500
--detailColor grey500
--linkColor blue500
container-type inline-size
&__picture
aspect-ratio 1/1
border-radius 50%
display block
margin-left auto
width 96px
overflow hidden
object-fit cover
@container (width > 600px)
&
width 160px
&__title
margin-bottom 16px
&__current
margin-bottom 16px
&__titles
@extends $headline4
color var(--detailColor)
margin-bottom 16px
&__units
margin-bottom 24px
&__contact
margin-top 24px
&__contact-email
align-items center
display flex
&__contact-email-icon
margin 8px 8px 0 0
&__contact-email-link
@extends $linkBodySmall
color var(--linkColor)
display inline-block
text-decoration none
&__tags
margin-top 8px
No notes defined.