<div class="profile-mini-component profile-mini-component--network profile-mini-component--light profile-mini-component--large">
<h2 class="profile-mini-component__title" id="Here are important relevant people">
Here are important relevant people
</h2>
<div class="profile-mini-component__cards-grid">
<div class="profile-mini-component__card">
<article class="person-card person-card--light person-card--network person-card--">
<div class="person-card__image person-card__image--">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/152/192?random=1" alt="Kitten" width="320" height="386">
</figure>
</div>
<div class="person-card__info-and-related person-card__info-and-related--">
<div class="person-card__info">
<div class="profile-card__title profile-card__title--">
<div class="card-title">
<div class="card-title__title">
<h2 class="linked-title linked-title--network linked-title--light">
<a href="#" class="
linked-title__link linked-title__link--light
">
Jaime Jones<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="profile-card__current">
<div class="profile-card__titles">
City Planner
</div>
</div>
<div class="profile-card__contact">
<div class="profile-card__contact-email">
<a href="mailto:tthomas@uiuc.edu" class="profile-card__contact-email-link">
tthomas@uiuc.edu
</a>
</div>
<div class="profile-card__contact-phone">
<a href="tel:217.244.6531" class="profile-card__contact-phone-link">
217.244.6531
</a>
</div>
</div>
</div>
<div class="person-card__related person-card__related--">
</div>
</div>
</article>
</div>
<div class="profile-mini-component__card">
<article class="person-card person-card--light person-card--network person-card--">
<div class="person-card__image person-card__image--">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/152/192?random=2" alt="Kitten" width="320" height="386">
</figure>
</div>
<div class="person-card__info-and-related person-card__info-and-related--">
<div class="person-card__info">
<div class="profile-card__title profile-card__title--">
<div class="card-title">
<div class="card-title__title">
<h2 class="linked-title linked-title--network linked-title--light">
<a href="#" class="
linked-title__link linked-title__link--light
">
Jaime Jones<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="profile-card__current">
<div class="profile-card__titles">
City Planner
</div>
</div>
<div class="profile-card__contact">
<div class="profile-card__contact-email">
<a href="mailto:tthomas@uiuc.edu" class="profile-card__contact-email-link">
tthomas@uiuc.edu
</a>
</div>
<div class="profile-card__contact-phone">
<a href="tel:217.244.6531" class="profile-card__contact-phone-link">
217.244.6531
</a>
</div>
</div>
</div>
<div class="person-card__related person-card__related--">
</div>
</div>
</article>
</div>
<div class="profile-mini-component__card">
<article class="person-card person-card--light person-card--network person-card--">
<div class="person-card__image person-card__image--">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/152/192?random=3" alt="Kitten" width="320" height="386">
</figure>
</div>
<div class="person-card__info-and-related person-card__info-and-related--">
<div class="person-card__info">
<div class="profile-card__title profile-card__title--">
<div class="card-title">
<div class="card-title__title">
<h2 class="linked-title linked-title--network linked-title--light">
<a href="#" class="
linked-title__link linked-title__link--light
">
Jaime Jones<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="profile-card__current">
<div class="profile-card__titles">
City Planner
</div>
</div>
<div class="profile-card__contact">
<div class="profile-card__contact-email">
<a href="mailto:tthomas@uiuc.edu" class="profile-card__contact-email-link">
tthomas@uiuc.edu
</a>
</div>
<div class="profile-card__contact-phone">
<a href="tel:217.244.6531" class="profile-card__contact-phone-link">
217.244.6531
</a>
</div>
</div>
</div>
<div class="person-card__related person-card__related--">
</div>
</div>
</article>
</div>
<div class="profile-mini-component__card">
<article class="person-card person-card--light person-card--network person-card--">
<div class="person-card__image person-card__image--">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/152/192?random=4" alt="Kitten" width="320" height="386">
</figure>
</div>
<div class="person-card__info-and-related person-card__info-and-related--">
<div class="person-card__info">
<div class="profile-card__title profile-card__title--">
<div class="card-title">
<div class="card-title__title">
<h2 class="linked-title linked-title--network linked-title--light">
<a href="#" class="
linked-title__link linked-title__link--light
">
Jaime Jones<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="profile-card__current">
<div class="profile-card__titles">
City Planner
</div>
</div>
<div class="profile-card__contact">
<div class="profile-card__contact-email">
<a href="mailto:tthomas@uiuc.edu" class="profile-card__contact-email-link">
tthomas@uiuc.edu
</a>
</div>
<div class="profile-card__contact-phone">
<a href="tel:217.244.6531" class="profile-card__contact-phone-link">
217.244.6531
</a>
</div>
</div>
</div>
<div class="person-card__related person-card__related--">
</div>
</div>
</article>
</div>
</div>
<div class="profile-mini-component__cta-container">
<a href="#" class="standard-button standard-button--network standard-button--light
standard-button--full-width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">View more cool peeps</span><span class="standard-button__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></span>
</div>
</a>
</div>
</div>
<div class="profile-mini-component profile-mini-component--{{ siteUnit }} profile-mini-component--{{ background }} profile-mini-component--{{ componentSpacing }}">
{% if component.title | default and (component.title|trim) %}
<h2 class="profile-mini-component__title"
id="{{ component.title|sanitize }}">
{{ component.title }}
</h2>
{% endif %}
<div class="profile-mini-component__cards-grid">
{% for person in component.cards %}
<div class="profile-mini-component__card">
{% include 'partials/profile-card/profile-card.twig' %}
</div>
{% endfor %}
</div>
{% if component.callToAction | default %}
<div class="profile-mini-component__cta-container">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
icon: 'right-chevron',
text: component.callToAction.text,
url: component.callToAction.url,
type: 'primary',
width: 'full'
}
} %}
</div>
{% endif %}
</div>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "profile-mini",
"title": "Here are important relevant people",
"cards": [
{
"fullName": "Jaime Jones",
"titles": "City Planner",
"profileTypeLabel": "Core Staff",
"photo": {
"altText": "Kitten",
"src": "https://picsum.photos/152/192?random=1"
},
"emailAddress": "tthomas@uiuc.edu",
"phoneNumber": "217.244.6531",
"permalink": "#"
},
{
"fullName": "Jaime Jones",
"titles": "City Planner",
"profileTypeLabel": "Core Staff",
"photo": {
"altText": "Kitten",
"src": "https://picsum.photos/152/192?random=2"
},
"emailAddress": "tthomas@uiuc.edu",
"phoneNumber": "217.244.6531",
"permalink": "#"
},
{
"fullName": "Jaime Jones",
"titles": "City Planner",
"profileTypeLabel": "Core Staff",
"photo": {
"altText": "Kitten",
"src": "https://picsum.photos/152/192?random=3"
},
"emailAddress": "tthomas@uiuc.edu",
"phoneNumber": "217.244.6531",
"permalink": "#"
},
{
"fullName": "Jaime Jones",
"titles": "City Planner",
"profileTypeLabel": "Core Staff",
"photo": {
"altText": "Kitten",
"src": "https://picsum.photos/152/192?random=4"
},
"emailAddress": "tthomas@uiuc.edu",
"phoneNumber": "217.244.6531",
"permalink": "#"
}
],
"callToAction": {
"text": "View more cool peeps",
"url": "#"
}
}
}
.profile-mini-component
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&--dark
--textColor white
&--light
--textColor charcoalLight
&--dark
--textColor white
&--light
--textColor charcoalLight
&__title
@extends $headline1
color var(--textColor)
margin-bottom 48px
&__cards-grid
margin-bottom 48px
There are no notes for this item.