<div class="course-preview course-preview--light">
<div class="course-preview__text-container">
<div class="course-preview__title course-preview__title--light"> UP116: Urban Informatics</div>
<div class="course-preview__description course-preview__description--light">
<p>Introduces students to basic analytical techniques used to better understand how cities work. Topics include the foundational <a href="#">statistical concepts</a> 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--light">
<a href="#" class="standard-button standard-button--durp standard-button--light
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">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--light">
<a href="#" class="standard-button standard-button--durp standard-button--light
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 (file)</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" 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>
<div class="course-preview course-preview--{{ background }}">
<div class="course-preview__text-container">
<div class="course-preview__title course-preview__title--{{ background }}"> {{ course.title }}</div>
{% if course.description %}
<div class="course-preview__description course-preview__description--{{ background }}"> {{ course.description | raw }}</div>
{% endif %}
</div>
<div class="course-preview__link-container">
{% if course.primaryLink %}
<div class="course-preview__primary-link course-preview__primary-link--{{ background }}">
{% set buttonColor = background == 'light' ? 'charcoalLighter' : 'cloud' %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: 'download-link',
text: course.primaryLink.text,
url: course.primaryLink.url,
width: 'full',
isDownload: true,
accessibleLabel: 'Download syllabus for ' ~ course.title
}
} %}
</div>
{% endif %}
{% if course.secondaryLink %}
<div class="course-preview__secondary-link course-preview__secondary-link--{{ background }}">
{% set buttonColor = background == 'light' ? 'cloud' : 'charcoalLighter' %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'secondary',
icon: course.secondaryLink.icon,
text: course.secondaryLink.text,
url: course.secondaryLink.url,
width: 'full',
isDownload: course.secondaryLink.isDownload
}
} %}
</div>
{% endif %}
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "light",
"course": {
"title": "UP116: Urban Informatics",
"description": "<p>Introduces students to basic analytical techniques used to better understand how cities work. Topics include the foundational <a href=\"#\">statistical concepts</a> 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": "Example syllabus",
"url": "#",
"icon": "download-link"
},
"secondaryLink": {
"text": "Secondary link (file)",
"url": "#",
"icon": "internal-link"
}
}
}
.course-preview
background-color cloudDark
padding 24px 16px
+above(coursePreviewFlexBreakpoint)
display flex
justify-content space-between
padding 24px
+above(largeDeviceBreakpoint)
padding 32px
&--dark
background-color charcoalLight
&__text-container
+above(coursePreviewFlexBreakpoint)
margin-right 32px
&__title
@extends $primaryLead
margin-bottom 8px
&__description
@extends $richText
&--dark
@extends $richTextOnDark
&__link-container
margin-top 24px
+above(coursePreviewFlexBreakpoint)
margin-top 0
min-width 230px
&__secondary-link
margin-top 16px
There are no notes for this item.