<article class="card-with-image card-with-image--light ">
<div class="card-with-image__content">
<div class="event-card-content event-card-content--music">
<div class="event-data-with-icon">
<div class="event-data-with-icon__icon">
<div class="event-card-content__icon">
<div class="calendar-page calendar-page--light calendar-page--music">
<div class="calendar-page__month">
Feb
</div>
<div class="calendar-page__day">
7
</div>
</div>
</div>
</div>
<div class="event-data-with-icon__detail">
<div class="event-card-content__title">
<h2 class="linked-title linked-title--music 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="event-card-content__date event-card-content__date--light">
February 7, 2020
</div>
<div class="event-card-content__time event-card-content__time--light">
<span class="event-card-content__dayofweek">Tuesday, </span> 12:30 PM - 2:30 PM
</div>
</div>
</div>
</div>
</div>
<div class="card-with-image__image ">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/800/600?random=1" alt="friendly kitten" width="320" height="228">
</figure>
</div>
</article>
{% embed 'templates/card-with-image/card-with-image.twig' %}
{% block text %}
<div class="event-card-content event-card-content--{{ siteUnit }}">
{% embed 'templates/event-data-with-icon/event-data-with-icon.twig' %}
{% block icon %}
<div class="event-card-content__icon">
{% include 'bits/calendar-page/calendar-page.twig' with {
shortStartMonth: event.shortStartMonth,
startDay: event.startDay
}%}
</div>
{% endblock %}
{% block information %}
<div class="event-card-content__title">
{% if showUnit %}
<div class="event-card-content__unit">{{ event.unitLabel }}</div>
{% endif %}
{% include 'bits/linked-title/linked-title.twig' with {
url: event.permalink,
text: event.title,
element: headingEl
} %}
</div>
<div class="event-card-content__date event-card-content__date--{{ background }}">
{% if event.isRecurring | default %}
<span class="event-card-content__recurring-icon">
{% include 'bits/icons/recurring.twig' %}
</span>
{% endif %}
{{ event.fullDate }}
</div>
<div class="event-card-content__time event-card-content__time--{{ background }}">
{% if event.startDayOfWeek | default %}
<span class="event-card-content__dayofweek">{{ event.startDayOfWeek }}{{ event.isAllDay or event.startTime ? ', ' }}</span>
{% endif %}
{% if event.isAllDay | default %}
All day
{% elseif event.startTime == event.endTime %}
{{ event.startTime }}
{% elseif event.startTime and event.endTime %}
{{ event.startTime }} - {{ event.endTime }}
{% elseif event.startTime %}
{{ event.startTime }}
{% endif %}
</div>
{% if event.isFree | default %}
<div class="event-card-content__is-free">Free event</div>
{% endif %}
{% endblock %}
{% endembed %}
</div>
{% endblock %}
{% block image %}
{% if event.addImage and not noImage %}
{% import "bits/macros/imageSource.twig" as imageMacros %}
{{ imageMacros.create(event.featuredImage, 320, 228, background) }}
{% endif %}
{% endblock %}
{% endembed %}
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"showUnit": false,
"event": {
"unit": "college",
"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"
}
}
}
.event-card-content
--dateColor heritageOrangeDarkest
--iconFillColor illiniOrange
--freeColor heritageOrangeDarkest
&--arch
--dateColor industrialBlue
--iconFillColor industrialBlue
--freeColor industrialBlue
&--art
--dateColor archesBlueDark
--iconFillColor archesBlue
--freeColor archesBlueDark
&--dance
--dateColor archesBlueDark
--iconFillColor archesBlue
--freeColor archesBlueDark
&--durp
--dateColor heritageOrangeDarkest
--iconFillColor illiniOrange
--freeColor heritageOrangeDarkest
&--landarch
--dateColor heritageOrangeDarkest
--iconFillColor illiniOrange
--freeColor heritageOrangeDarkest
&--theatre
--dateColor heritageOrangeDarkest
--iconFillColor illiniOrange
--freeColor heritageOrangeDarkest
&--music
--dateColor heritageOrangeDarkest
--iconFillColor illiniOrange
--freeColor heritageOrangeDarkest
padding 24px
&__unit
@extends $headline5
color heritageOrangeDarkest
margin-bottom 8px
text-transform uppercase
&__icon
+below(eventCardBreakpoint)
margin-bottom 0
&__title
margin-bottom 8px
&__date
@extends $headline3
color var(--dateColor)
display flex
margin-bottom 8px
&--dark
color white
&__recurring-icon
margin-right 12px
& svg
& .recurring-icon__shape
fill var(--iconFillColor)
&__time
@extends $detail
&__location
@extends $detail
&__is-free
@extends $label
color var(--freeColor)
margin-top 8px
There are no notes for this item.