<div class="topic-block-component-durp topic-block-component-durp--light topic-block-component-durp--large">
<h2 class="topic-block-component-durp__header topic-block-component-durp__header--light
" id="Component header">
Component header
</h2>
<div class="topic-block-component-durp__content-container ">
<div class="topic-block-component-durp__text-and-cta-container--light">
<div class="topic-block-component-durp__text topic-block-component-durp__text--light">
<p>Our graduate <em>students have access</em> to a wide variety of world-class <a href="#">facilities</a>, including:</p>
<ul>
<li>Studio Spaces</li>
<li>The <strong>Ricker Library</strong> of Architecture and Art</li>
<li>Fabrication and Print (3D) labs</li>
<li>Computing Resources</li>
<li>Hosted Exhibitions, Reviews, and Events</li>
</ul>
</div>
<div class="topic-block-component-durp__cta">
<a href="#" class="standard-button standard-button--durp standard-button--light
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Show me more</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>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="topic-block-component-durp topic-block-component-durp--{{ background }} topic-block-component-durp--{{ componentSpacing }}">
{% if component.header|default and (component.header|trim) %}
<h2 class="topic-block-component-durp__header topic-block-component-durp__header--{{ background }}
{{ component.hideHeader ? 'topic-block-component-durp__header--is-hidden' : '' }}"
id="{{ component.header|sanitize }}">
{{ component.header }}
</h2>
{% endif %}
<div class="topic-block-component-durp__content-container {{ component.image|default(false) ? 'topic-block-component-durp__content-container--with-image' }}">
{% if component.image %}
<div class="topic-block-component-durp__image topic-block-component-durp__image--{{ background }}">
{{ imageMacros.create(component.image, 850, 650, background) }}
</div>
{% endif %}
<div class="topic-block-component-durp__text-and-cta-container--{{ background }}">
<div class="topic-block-component-durp__text topic-block-component-durp__text--{{ background }}">
{{ component.text }}
</div>
{% if component.callToAction.text %}
<div class="topic-block-component-durp__cta">
{% set buttonColor = background == 'light' ? 'charcoalLighter' : 'cloud' %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: component.callToAction.type|default('internal') ~ '-link',
text: component.callToAction.text,
url: component.callToAction.url,
}
} %}
</div>
{% endif %}
</div>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "light",
"componentSpacing": "large",
"component": {
"header": "Component header",
"image": null,
"text": "<p>Our graduate <em>students have access</em> to a wide variety of world-class <a href=\"#\">facilities</a>, including:</p><ul><li>Studio Spaces</li><li>The <strong>Ricker Library</strong> of Architecture and Art</li><li>Fabrication and Print (3D) labs</li><li>Computing Resources</li><li>Hosted Exhibitions, Reviews, and Events</li></ul>",
"callToAction": {
"text": "Show me more",
"url": "#"
}
}
}
.topic-block-component-durp
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
padding 32px 24px
position relative
+above(mediumDeviceBreakpoint)
padding 32px
&--light
background-color backgroundColor = cloud
topicBlockBackgroundColorOverlay(backgroundColor)
&--dark
background-color backgroundColor = charcoalLighter
topicBlockBackgroundColorOverlay(backgroundColor)
&__header
@extends $headline1
margin-bottom 16px
&--is-hidden
@extends $visually-hidden
&__content-container
display grid
grid-gap 24px
grid-template-areas "text-and-cta"
grid-template-columns 1fr
&--with-image
grid-gap 0
grid-template-areas \
"image" \
"text-and-cta"
+above(largeDeviceBreakpoint)
grid-gap 24px
grid-template-areas "text-and-cta image"
grid-template-columns 1fr 1fr
&__image
grid-area image
margin-bottom 24px
&--light
& > figure > picture
@extend $topicBlockOrangeOverlay
&--dark
& > figure > picture
@extend $topicBlockOrangeOverlay
@extend $topicBlockOnDarkWhiteOverlay
&__text-and-cta-container
grid-area text-and-cta
&__text
@extends $richText
margin-bottom 24px
There are no notes for this item.