<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 class="profile-card__tags">
<div class="tag-list">
<ul class="tag-list__list">
<span class="tag-list__icon"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<mask id="mask0_4613_118086" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4613_118086)">
<path d="M9.50016 14.2673C9.24461 14.5229 8.92794 14.6507 8.55016 14.6507C8.17239 14.6507 7.85572 14.5229 7.60016 14.2673L1.7335 8.40065C1.61127 8.27843 1.51405 8.13398 1.44183 7.96732C1.36961 7.80065 1.3335 7.62287 1.3335 7.43398V2.66732C1.3335 2.30065 1.46405 1.98676 1.72516 1.72565C1.98627 1.46454 2.30016 1.33398 2.66683 1.33398H7.4335C7.62239 1.33398 7.80016 1.3701 7.96683 1.44232C8.1335 1.51454 8.27794 1.61176 8.40016 1.73398L14.2668 7.61732C14.5224 7.87287 14.6502 8.18676 14.6502 8.55898C14.6502 8.93121 14.5224 9.2451 14.2668 9.50065L9.50016 14.2673ZM8.55016 13.334L13.3168 8.56732L7.4335 2.66732H2.66683V7.43398L8.55016 13.334ZM4.3335 5.33398C4.61127 5.33398 4.84739 5.23676 5.04183 5.04232C5.23627 4.84787 5.3335 4.61176 5.3335 4.33398C5.3335 4.05621 5.23627 3.8201 5.04183 3.62565C4.84739 3.43121 4.61127 3.33398 4.3335 3.33398C4.05572 3.33398 3.81961 3.43121 3.62516 3.62565C3.43072 3.8201 3.3335 4.05621 3.3335 4.33398C3.3335 4.61176 3.43072 4.84787 3.62516 5.04232C3.81961 5.23676 4.05572 5.33398 4.3335 5.33398Z" fill="#4E4E4E" />
</g>
</svg>
</span>
<li class="tag-list__tag">Deans Office</li>
<span class="tag-list__separator">,</span>
<li class="tag-list__tag">School of Music</li>
</ul>
</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": true
}
.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.