<div class="link-cards-component link-cards-component--dark link-cards-component--large">
<h2 class="link-cards-component__heading" id="This is a header for the link cards component">
This is a header for the link cards component
</h2>
<div class="link-cards-component__description link-cards-component__description--dark">
<p>This component has a <strong><em>DESCRIPTION!</em></strong></p>
</div>
<div class="link-cards-component__card-container">
<div class="link-cards-component__link-card">
<div class="link-card link-card--dark link-card--durp">
<div class="link-card__text-container">
<div class="link-card__title link-card__title--dark">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="#" class="
linked-title__link linked-title__link--dark
">
Bachelor of Arts in Urban Studies and Planning<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="link-card__caption link-card__caption--dark">Equips entry-level professional planners.</div>
</div>
</div>
</div>
<div class="link-cards-component__link-card">
<div class="link-card link-card--dark link-card--durp">
<div class="link-card__text-container">
<div class="link-card__title link-card__title--dark">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="#" class="
linked-title__link linked-title__link--dark
">
Bachelor of Arts in Urban Studies and Planning<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="link-card__caption link-card__caption--dark">Equips entry-level professional planners.</div>
</div>
<div class="link-card__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/450/300?random=1" alt="" width="432" height="304">
</figure>
</div>
</div>
</div>
<div class="link-cards-component__link-card">
<div class="link-card link-card--dark link-card--durp">
<div class="link-card__text-container">
<div class="link-card__title link-card__title--dark">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="#" class="
linked-title__link linked-title__link--dark
">
Minor in Urban Studies and Planning<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="link-card__caption link-card__caption--dark">Introduces students to contemporary issues and factors affecting the development and functioning of cities in the U.S. and worldwide.</div>
</div>
<div class="link-card__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/800/600?random=2" alt="" width="432" height="304">
</figure>
</div>
</div>
</div>
<div class="link-cards-component__link-card">
<div class="link-card link-card--dark link-card--durp">
<div class="link-card__text-container">
<div class="link-card__title link-card__title--dark">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="#" class="
linked-title__link linked-title__link--dark
">
Master of Urban Planning<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="link-card__caption link-card__caption--dark">Provide students with a deep intellectual grounding in specific knowledge areas and preparation in advanced skills and techniques of planning.</div>
</div>
<div class="link-card__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/500/300?random=3" alt="" width="432" height="304">
</figure>
</div>
</div>
</div>
<div class="link-cards-component__link-card">
<div class="link-card link-card--dark link-card--durp">
<div class="link-card__text-container">
<div class="link-card__title link-card__title--dark">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="#" class="
linked-title__link linked-title__link--dark
">
Master of Science in Sustainable Urban Management<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="link-card__caption link-card__caption--dark">Provides urban professionals working in a variety of fields with the necessary knowledge and skills for understanding the multiplicity of inter-related urban systems and crafting the necessary policy interventions that facilitate the
creation of sustainable, healthy, safe, and resilient communities.</div>
</div>
<div class="link-card__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/400/300?random=4" alt="" width="432" height="304">
</figure>
</div>
</div>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="link-cards-component link-cards-component--{{ background }} link-cards-component--{{ componentSpacing }}">
{% if component.heading|default and (component.heading|trim) %}
<h2 class="link-cards-component__heading"
id="{{ component.heading|sanitize }}">
{{ component.heading }}
</h2>
{% endif %}
{% if component.description|default and (component.description|trim) %}
<div class="link-cards-component__description link-cards-component__description--{{ background }}">
{{ component.description | raw }}
</div>
{% endif %}
<div class="link-cards-component__card-container">
{% for card in component.cards %}
<div class="link-cards-component__link-card">
{% include 'partials/link-card/link-card.twig' with {
card: card
}%}
</div>
{% endfor %}
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"componentSpacing": "large",
"component": {
"type": "link-cards",
"cards": [
{
"title": "Bachelor of Arts in Urban Studies and Planning",
"url": "#",
"caption": "Equips entry-level professional planners.",
"image": null
},
{
"title": "Bachelor of Arts in Urban Studies and Planning",
"url": "#",
"caption": "Equips entry-level professional planners.",
"image": {
"src": "https://picsum.photos/450/300?random=1",
"alt": "placeholder"
}
},
{
"title": "Minor in Urban Studies and Planning",
"url": "#",
"caption": "Introduces students to contemporary issues and factors affecting the development and functioning of cities in the U.S. and worldwide.",
"image": {
"src": "https://picsum.photos/800/600?random=2",
"alt": "placeholder"
}
},
{
"title": "Master of Urban Planning",
"url": "#",
"caption": "Provide students with a deep intellectual grounding in specific knowledge areas and preparation in advanced skills and techniques of planning.",
"image": {
"src": "https://picsum.photos/500/300?random=3",
"alt": "placeholder"
}
},
{
"title": "Master of Science in Sustainable Urban Management",
"url": "#",
"caption": "Provides urban professionals working in a variety of fields with the necessary knowledge and skills for understanding the multiplicity of inter-related urban systems and crafting the necessary policy interventions that facilitate the creation of sustainable, healthy, safe, and resilient communities.",
"image": {
"src": "https://picsum.photos/400/300?random=4",
"alt": "placeholder"
}
}
],
"heading": "This is a header for the link cards component",
"description": "<p>This component has a <strong><em>DESCRIPTION!</em></strong></p>"
}
}
.link-cards-component
&--dark
--backgroundColor charcoalLight
--textColor grey
&--light
--backgroundColor cloudDark
--textColor greyDarkest
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&__heading
@extends $headline1
color var(--textColor)
margin-bottom 0.5em
&__description
@extends $richText
&--dark
@extends $richTextOnDark
&__card-container
background-color var(--backgroundColor)
display grid
grid-template-columns repeat(auto-fit, minmax(mediumCardBreakpoint, 1fr))
grid-column-gap 16px
grid-row-gap 16px
+above(mediumDeviceBreakpoint)
grid-row-gap 24px
There are no notes for this item.