<div class="course-preview-component course-preview-component--dark course-preview-component--large">
<div class="course-preview-component__container">
<h2 class="course-preview-component__header course-preview-component__header--dark
" id="Header for course preview component">
Header for course preview component
</h2>
<div class="course-preview-component__courses">
<div class="course-preview-component__course course-preview-component__course--dark">
<div class="course-preview course-preview--dark">
<div class="course-preview__text-container">
<div class="course-preview__title course-preview__title--dark"> UP116: Urban Informatics</div>
<div class="course-preview__description course-preview__description--dark">
<p>Introduces students to basic analytical techniques used to better understand how cities work. Topics include the foundational statistical concepts of data, variation, and inference. Students formulate a research question about
an urban studies or planning issue, collect data, use statistical software to analyze data, and communicate the findings.</p>
</div>
</div>
<div class="course-preview__link-container">
<div class="course-preview__primary-link course-preview__primary-link--dark">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button--full-width standard-button--primary" aria-label="Download syllabus for UP116: Urban Informatics" target="_blank">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Primary link</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16"><path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M8 4a1 1 0 0 1 1 1v7.172l1.828-1.829a1 1 0 1 1 1.415 1.414L8 16l-4.243-4.243a1 1 0 1 1 1.415-1.414L7 12.172V5a1 1 0 0 1 1-1zm8-4v16h-3a1 1 0 0 1 0-2h1V2H2v12h1a1 1 0 0 1 0 2H0V0h16z"/></svg></span></span>
</div>
</a>
</div>
<div class="course-preview__secondary-link course-preview__secondary-link--dark">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button--full-width standard-button--secondary" target="_blank">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Secondary Link (file)</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16"><path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M8 4a1 1 0 0 1 1 1v7.172l1.828-1.829a1 1 0 1 1 1.415 1.414L8 16l-4.243-4.243a1 1 0 1 1 1.415-1.414L7 12.172V5a1 1 0 0 1 1-1zm8-4v16h-3a1 1 0 0 1 0-2h1V2H2v12h1a1 1 0 0 1 0 2H0V0h16z"/></svg></span></span>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="course-preview-component__course course-preview-component__course--dark">
<div class="course-preview course-preview--dark">
<div class="course-preview__text-container">
<div class="course-preview__title course-preview__title--dark"> UP136: Urban Sustainability</div>
</div>
<div class="course-preview__link-container">
<div class="course-preview__primary-link course-preview__primary-link--dark">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button--full-width standard-button--primary" aria-label="Download syllabus for UP136: Urban Sustainability" target="_blank">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Example syllabus</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16"><path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M8 4a1 1 0 0 1 1 1v7.172l1.828-1.829a1 1 0 1 1 1.415 1.414L8 16l-4.243-4.243a1 1 0 1 1 1.415-1.414L7 12.172V5a1 1 0 0 1 1-1zm8-4v16h-3a1 1 0 0 1 0-2h1V2H2v12h1a1 1 0 0 1 0 2H0V0h16z"/></svg></span></span>
</div>
</a>
</div>
<div class="course-preview__secondary-link course-preview__secondary-link--dark">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button--full-width standard-button--secondary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Secondary Link (external)</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16"><path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/></svg></span></span>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="course-preview-component__course course-preview-component__course--dark">
<div class="course-preview course-preview--dark">
<div class="course-preview__text-container">
<div class="course-preview__title course-preview__title--dark"> UP201: Planning in Action</div>
<div class="course-preview__description course-preview__description--dark">
<p>Introduces students to different career paths open to urban studies and planning majors. Students interact with professionals and take part in hands-on activities related to different concentration areas: sustainability, policy
& planning, social justice and global cities.</p>
</div>
</div>
<div class="course-preview__link-container">
<div class="course-preview__primary-link course-preview__primary-link--dark">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button--full-width standard-button--primary" aria-label="Download syllabus for UP201: Planning in Action" target="_blank">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Example syllabus</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16"><path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M8 4a1 1 0 0 1 1 1v7.172l1.828-1.829a1 1 0 1 1 1.415 1.414L8 16l-4.243-4.243a1 1 0 1 1 1.415-1.414L7 12.172V5a1 1 0 0 1 1-1zm8-4v16h-3a1 1 0 0 1 0-2h1V2H2v12h1a1 1 0 0 1 0 2H0V0h16z"/></svg></span></span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="course-preview-component course-preview-component--{{ background }} course-preview-component--{{ componentSpacing }}">
<div class="course-preview-component__container">
{% if component.header|default and (component.header|trim) %}
<h2 class="course-preview-component__header course-preview-component__header--{{ background }}
{{ component.hideHeader ? 'course-preview-component__header--is-hidden' : '' }}"
id="{{ component.header|sanitize }}">
{{ component.header }}
</h2>
{% endif %}
<div class="course-preview-component__courses">
{% for course in component.courses %}
<div class="course-preview-component__course course-preview-component__course--{{ background }}">
{% include 'partials/course-preview/course-preview.twig' %}
</div>
{% endfor %}
</div>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"componentSpacing": "large",
"component": {
"type": "course-preview",
"header": "Header for course preview component",
"courses": [
{
"title": "UP116: Urban Informatics",
"description": "<p>Introduces students to basic analytical techniques used to better understand how cities work. Topics include the foundational statistical concepts of data, variation, and inference. Students formulate a research question about an urban studies or planning issue, collect data, use statistical software to analyze data, and communicate the findings.</p>",
"primaryLink": {
"text": "Primary link",
"url": "#"
},
"secondaryLink": {
"text": "Secondary Link (file)",
"url": "#",
"icon": "download-link",
"isDownload": true
}
},
{
"title": "UP136: Urban Sustainability",
"description": null,
"primaryLink": {
"text": "Example syllabus",
"url": "#"
},
"secondaryLink": {
"text": "Secondary Link (external)",
"url": "#",
"icon": "external-link"
}
},
{
"title": "UP201: Planning in Action",
"description": "<p>Introduces students to different career paths open to urban studies and planning majors. Students interact with professionals and take part in hands-on activities related to different concentration areas: sustainability, policy & planning, social justice and global cities.</p>",
"primaryLink": {
"text": "Example syllabus",
"url": "#"
},
"secondaryLink": null
}
],
"callToAction": {
"text": "Meet more students",
"url": "#"
}
}
}
.course-preview-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
&--is-hidden
@extends $visually-hidden
&__courses
margin-bottom 24px
padding 0 24px
+above(coursePreviewFlexBreakpoint)
padding 0
&__course:nth-child(odd) .course-preview
&.course-preview--light
background-color cloud
&.course-preview--dark
background-color charcoalLighter
There are no notes for this item.