<div class="student-card student-card--light student-card--durp">
<div class="student-card__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/300/300" alt="placeholder" width="208" height="228">
</figure>
</div>
<div class="student-card__text-container">
<div class="student-card__name student-card__name--light">
<h2 class="linked-title linked-title--durp linked-title--light">
<a href="#" class="
linked-title__link linked-title__link--light
linked-title__link--large
">
Sergio Andres Contreras Pinto<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 class="student-card__hometown student-card__hometown--light">from Vicuna, Chile</div>
<div class="student-card__degree student-card__degree--light">Bachelor of Arts in Urban Studies and Planning</div>
<div class="student-card__degree student-card__degree--light">Minor in Urban Studies and Planning</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="student-card student-card--{{ background }} student-card--{{ siteUnit }}">
{% if card.image %}
<div class="student-card__image">
{{ imageMacros.create(card.image, 208, 228, background) }}
</div>
{% endif %}
<div class="student-card__text-container">
<div class="student-card__name student-card__name--{{ background }}">
{% include 'bits/linked-title/linked-title.twig' with {
text: card.name,
url: card.url,
large: true
}%}
</div>
{% if card.hometown %}
<div class="student-card__hometown student-card__hometown--{{ background }}">from {{ card.hometown }}</div>
{% endif %}
{% for degree in card.degrees %}
<div class="student-card__degree student-card__degree--{{ background }}">{{ degree }}</div>
{% endfor %}
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "light",
"card": {
"name": "Sergio Andres Contreras Pinto",
"url": "#",
"hometown": "Vicuna, Chile",
"degrees": [
"Bachelor of Arts in Urban Studies and Planning",
"Minor in Urban Studies and Planning"
],
"image": {
"src": "https://picsum.photos/300/300",
"altText": "placeholder"
}
}
}
.student-card
background-color cloud
display flex
flex-direction column
padding 24px
+above(mediumDeviceBreakpoint)
flex-direction row
&--dark
background-color charcoalLighter
&__image
margin-bottom 16px
height 228px
min-width 208px
max-width 208px
+above(mediumDeviceBreakpoint)
position relative
left -24px
&__text-container
display flex
flex-direction column
justify-content center
&__name
margin-bottom 8px
+above(mediumDeviceBreakpoint)
margin-bottom 16px
&__hometown
@extends $headline3
margin-bottom 4px
&__degree
@extends $secondaryParagraph
There are no notes for this item.