<div class="student-feature-component student-feature-component--dark student-feature-component--large
student-feature-component--durp">
<h2 class="student-feature-component__header student-feature-component__header--dark" id="Header for student block">
Header for student block
</h2>
<div class="student-feature-component__card student-feature-component__card--dark">
<div class="student-card student-card--dark student-card--durp">
<div class="student-card__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/300/300?random=1" alt="placeholder" width="208" height="228">
</figure>
</div>
<div class="student-card__text-container">
<div class="student-card__name student-card__name--dark">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="#" class="
linked-title__link linked-title__link--dark
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--dark">from Vicuna, Chile</div>
<div class="student-card__degree student-card__degree--dark">PhD student</div>
</div>
</div>
</div>
<div class="student-feature-component__card student-feature-component__card--dark">
<div class="student-card student-card--dark student-card--durp">
<div class="student-card__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/300/300?random=2" alt="placeholder" width="208" height="228">
</figure>
</div>
<div class="student-card__text-container">
<div class="student-card__name student-card__name--dark">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="#" class="
linked-title__link linked-title__link--dark
linked-title__link--large
">
Yuan Xuefeng<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--dark">from Bejing, China</div>
<div class="student-card__degree student-card__degree--dark">PhD student</div>
</div>
</div>
</div>
<div class="student-feature-component__card student-feature-component__card--dark">
<div class="student-card student-card--dark student-card--durp">
<div class="student-card__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/300/300?random=3" alt="placeholder" width="208" height="228">
</figure>
</div>
<div class="student-card__text-container">
<div class="student-card__name student-card__name--dark">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="#" class="
linked-title__link linked-title__link--dark
linked-title__link--large
">
Charley Rasmussen<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--dark">from Peoria, IL</div>
<div class="student-card__degree student-card__degree--dark">PhD student</div>
</div>
</div>
</div>
<div class="student-feature-component__cta student-feature-component__cta--dark">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button--full-width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Meet more students</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="student-feature-component student-feature-component--{{ background }} student-feature-component--{{ componentSpacing }}
student-feature-component--{{ siteUnit }}">
{% if component.header|default and (component.header|trim) %}
<h2 class="student-feature-component__header student-feature-component__header--{{ background }}"
id="{{ component.header|sanitize }}">
{{ component.header }}
</h2>
{% endif %}
{%
for card in component.cards %}
<div class="student-feature-component__card student-feature-component__card--{{ background }}">
{% include 'partials/student-card/student-card.twig' with {
card: card
}%}
</div>
{% endfor %}
<div class="student-feature-component__cta student-feature-component__cta--{{ background }}">
{% set buttonColor = background == 'light' ? 'charcoalLighter' : 'cloud' %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
text: component.callToAction.text,
url: component.callToAction.url,
icon: 'right-chevron',
width: 'full',
}
}%}
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"componentSpacing": "large",
"component": {
"type": "student-feature",
"header": "Header for student block",
"cards": [
{
"name": "Sergio Andres Contreras Pinto",
"url": "#",
"hometown": "Vicuna, Chile",
"degrees": [
"PhD student"
],
"image": {
"src": "https://picsum.photos/300/300?random=1",
"altText": "placeholder"
}
},
{
"name": "Yuan Xuefeng",
"url": "#",
"hometown": "Bejing, China",
"degrees": [
"PhD student"
],
"image": {
"src": "https://picsum.photos/300/300?random=2",
"altText": "placeholder"
}
},
{
"name": "Charley Rasmussen",
"url": "#",
"hometown": "Peoria, IL",
"degrees": [
"PhD student"
],
"image": {
"src": "https://picsum.photos/300/300?random=3",
"altText": "placeholder"
}
}
],
"callToAction": {
"text": "Meet more students",
"url": "#"
}
}
}
.student-feature-component
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
background-color cloudDark
&--dark
background-color charcoalLight
&__header
@extends $headline1
margin-bottom 32px
+above(mediumDeviceBreakpoint)
margin-bottom 48px
&__card:nth-child(odd) .student-card
&.student-card--light
background-color cloudDark
&.student-card--dark
background-color charcoalLight
&__cta
margin-top 32px
+above(mediumDeviceBreakpoint)
margin-top 48px
There are no notes for this item.