<article class="card-with-image card-with-image--light ">
<div class="card-with-image__content">
<div class="related-event-card-content related-event-card-content--durp">
<div class="related-event-card-content__listing-link">Event</div>
<div class="event-data-with-icon">
<div class="event-data-with-icon__icon">
</div>
<div class="event-data-with-icon__detail">
<div class="related-event-card-content__title">
<h2 class="linked-title linked-title--durp linked-title--light">
<a href="#" class="
linked-title__link linked-title__link--light
">
Re-imagining Realities: Using Digital Vernaculars for Physical Change<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="related-event-card-content__date related-event-card-content__date--light">
February 7, 2020
</div>
<div class="related-event-card-content__time related-event-card-content__time--light">
<span class="related-event-card-content__dayofweek">Tuesday, </span> 12:30 PM - 2:30 PM
</div>
<div class="related-event-card-content__location related-event-card-content__location--light">
611 Taft Drive Champaign IL 61820
</div>
<div class="related-event-card-content__location related-event-card-content__location--light">
online via Zoom
</div>
<div class="related-event-card-content__location related-event-card-content__location--light">
611 Taft Drive Champaign IL 61820
</div>
</div>
</div>
</div>
</div>
<div class="card-with-image__image ">
</div>
</article>
{% embed 'templates/card-with-image/card-with-image.twig' %}
{% block text %}
<div class="related-event-card-content related-event-card-content--{{ siteUnit }}">
{% if relatedContentLinks['events'] | default %}
<a class="related-event-card-content__listing-link" href="{{ relatedContentLinks['events'] }}">Event</a>
{% else %}
<div class="related-event-card-content__listing-link">Event</div>
{% endif %}
{% embed 'templates/event-data-with-icon/event-data-with-icon.twig' %}
{% block icon %}
{% endblock %}
{% block information %}
<div class="related-event-card-content__title">
{% include 'bits/linked-title/linked-title.twig' with {
url: event.permalink,
text: event.title,
} %}
</div>
<div class="related-event-card-content__date related-event-card-content__date--{{ background }}">
{% if event.isRecurring | default %}
<span class="related-event-card-content__recurring-icon">
{% include 'bits/icons/recurring.twig' %}
</span>
{% endif %}
{{ event.fullDate }}
</div>
<div class="related-event-card-content__time related-event-card-content__time--{{ background }}">
{% if event.startDayOfWeek | default %}
<span class="related-event-card-content__dayofweek">{{ event.startDayOfWeek }}, </span>
{% endif %}
{% if event.isAllDay | default %}
All day
{% else %}
{{ event.startTime }} - {{ event.endTime }}
{% endif %}
</div>
{% if event.locations | default %}
{% for location in event.locations %}
<div class="related-event-card-content__location related-event-card-content__location--{{ background }}">
{% if location.physicalAddress | default%}
{{ location.physicalAddress }}
{% endif %}
{% if location.physicalBuildingNumber | default%}
{{ location.physicalBuildingNumber }}
{% endif %}
{% if location.locationText | default%}
{{ location.locationText }}
{% endif %}
</div>
{% endfor %}
{% endif %}
{% endblock %}
{% endembed %}
</div>
{% endblock %}
{% block image %}
{% endblock %}
{% endembed %}
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "light",
"event": {
"title": "Re-imagining Realities: Using Digital Vernaculars for Physical Change",
"permalink": "#",
"fullDate": "February 7, 2020",
"startTime": "12:30 PM",
"endTime": "2:30 PM",
"startDayOfWeek": "Tuesday",
"shortStartMonth": "Feb",
"startDay": "7",
"locations": [
{
"physicalAddress": "611 Taft Drive\r\n Champaign IL 61820",
"buildingNumber": "Room M230 Temple Buell Hall"
},
{
"virtualLocation": "https://zoom.com",
"locationText": "online via Zoom"
},
{
"physicalAddress": "611 Taft Drive\r\n Champaign IL 61820",
"buildingNumber": "225 Temple Buell Hall"
}
],
"addImage": true,
"featuredImage": {
"src": "https://picsum.photos/800/600?random=1",
"altText": "friendly kitten"
}
}
}
.related-event-card-content
--dateColor heritageOrangeDarkest
--iconFillColor illiniOrange
&--arch
--dateColor industrialBlue
--iconFillColor industrialBlue
&--art
--dateColor archesBlueDark
--iconFillColor archesBlue
&--dance
--dateColor archesBlueDark
--iconFillColor archesBlue
&--durp
--dateColor heritageOrangeDarkest
--iconFillColor illiniOrange
&--theatre
--dateColor heritageOrangeDarkest
--iconFillColor illiniOrange
padding 24px 0
width 432px
&__listing-link
@extends $primaryLink
color var(--dateColor)
display block
margin-bottom 16px
padding 0 24px
&__title
@extends $secondaryLead
margin-bottom 16px
&__date
@extends $headline3
color var(--dateColor)
display flex
margin-bottom 8px
&__recurring-icon
margin-right 12px
& svg
& .recurring-icon__shape
fill var(--iconFillColor)
&__time
@extends $detail
&__location
@extends $detail
There are no notes for this item.