<div class="related-profile-card related-profile-card--music">
<article class="related-person-card related-person-card--light related-person-card--music">
<div class="related-person-card__info-and-related">
<div class="related-person-card__info">
<div class="related-profile-card__listing-link">People</div>
<div class="related-profile-card__title">
<div class="card-title">
<div class="card-title__title">
<h2 class="linked-title linked-title--music linked-title--light">
<a href="#" class="
linked-title__link linked-title__link--light
">
Dustin Allred<span class="linked-title__link-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</a>
</h2>
</div>
</div>
</div>
<div class="related-profile-card__current">
<div class="related-profile-card__titles">
Lecturer of Urban and Regional Planning, MSSUM Program Director
</div>
</div>
<div class="related-profile-card__contact">
<div class="related-profile-card__contact-email">
<a href="mailto:tthomas@uiuc.edu" class="related-profile-card__contact-email-link">
tthomas@uiuc.edu
</a>
</div>
<div class="related-profile-card__contact-phone">
<a href="tel:217.244.6531" class="related-profile-card__contact-phone-link">
217.244.6531
</a>
</div>
</div>
</div>
<div class="related-person-card__related">
<span class="badge">
Core Staff
</span>
</div>
</div>
</article>
</div>
<div class="related-profile-card related-profile-card--{{ siteUnit }}">
{% embed 'templates/related-person-card/related-person-card.twig' %}
{% block info %}
{% set personType = (type == 'faculty') ? 'faculty_profile' : 'staff_profile' %}
{% if relatedContentLinks[personType] | default %}
<a class="related-profile-card__listing-link" href="{{ relatedContentLinks[personType] }}">People</a>
{% else %}
<div class="related-profile-card__listing-link">People</div>
{% endif %}
<div class="related-profile-card__title">
{% include 'bits/card-title/card-title.twig' with {
url: person.permalink,
text: person.fullName,
background: background
} %}
</div>
{% if person.titles %}
<div class="related-profile-card__current">
<div class="related-profile-card__titles">
{{ person.titles }}
{% if person.title2 %}
<br>{{ person.title2 }}
{% endif %}
</div>
</div>
{% endif %}
{% if person.emailAddress or person.phoneNumber %}
<div class="related-profile-card__contact">
{% if person.emailAddress %}
<div class="related-profile-card__contact-email">
<a href="mailto:{{ person.emailAddress }}" class="related-profile-card__contact-email-link">
{{ person.emailAddress }}
</a>
</div>
{% endif %}
{% if person.phoneNumber %}
<div class="related-profile-card__contact-phone">
<a href="tel:{{ person.phoneNumber }}" class="related-profile-card__contact-phone-link">
{{ person.phoneNumber }}
</a>
</div>
{% endif %}
</div>
{% endif %}
{% endblock %}
{% block related %}
{% include 'bits/badge/badge.twig' with {
text: person.profileTypeLabel,
} %}
{% endblock %}
{% endembed %}
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"person": {
"fullName": "Dustin Allred",
"titles": "Lecturer of Urban and Regional Planning, MSSUM Program Director",
"photo": {
"src": "https://picsum.photos/272/352?random=1",
"altText": "friendly kitten"
},
"emailAddress": "tthomas@uiuc.edu",
"phoneNumber": "217.244.6531",
"profileTypeLabel": "Core Staff",
"permalink": "#"
}
}
.related-profile-card
--backgroundColor cloud
--linkColor altgeld
--titleColor charcoalLight
&--arch
--backgroundColor cloud
--linkColor industrialBlue
--titleColor charcoalLight
&--art
--backgroundColor cloud
--linkColor archesBlueDark
--titleColor charcoalLight
&--dance
--backgroundColor cloud
--linkColor archesBlueDark
--titleColor charcoalLight
&--theatre
--backgroundColor cloud
--linkColor altgeld
--titleColor illiniBlue
&--dark
--backgroundColor cloud
--linkColor illiniOrange
background-color var(--backgroundColor)
&__listing-link
@extends $primaryLink
color var(--linkColor)
display block
margin-bottom 16px
&__title
margin-bottom 8px
a
@extends $secondaryLead
color var(--titleColor)
&__current
margin-top 4px
&__titles
font-size 16px
font-weight 400
color var(--titleColor)
&__contact
margin-top 16px
&__contact-email
&__contact-phone
margin-bottom 6px
&__contact-email-link
&__contact-phone-link
@extends $hypertext
text-decoration none
color var(--titleColor)
font-size 16px
display inline-block
There are no notes for this item.