<div class="art-homepage-events">
<h2 class="art-homepage-events__heading">Upcoming events</h2>
<div class="art-homepage-events__container">
<div class="art-homepage-events__events">
<div class="art-homepage-events__event">
<article class="card-with-image card-with-image--light ">
<div class="card-with-image__content">
<div class="event-card-content event-card-content--art">
<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--art">
<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--art 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>
</article>
</div>
<div class="art-homepage-events__event">
<article class="card-with-image card-with-image--light ">
<div class="card-with-image__content">
<div class="event-card-content event-card-content--art">
<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--art">
<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--art 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>
</article>
</div>
<div class="art-homepage-events__event">
<article class="card-with-image card-with-image--light ">
<div class="card-with-image__content">
<div class="event-card-content event-card-content--art">
<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--art">
<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--art 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>
</article>
</div>
<div class="art-homepage-events__event">
<article class="card-with-image card-with-image--light ">
<div class="card-with-image__content">
<div class="event-card-content event-card-content--art">
<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--art">
<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--art 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>
</article>
</div>
</div>
<div class="art-homepage-events__call-to-action">
<a href="https://google.com" class="standard-button standard-button--art 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">See all events</span><span class="standard-button__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></span>
</div>
</a>
</div>
</div>
</div>
{% if homepageEvents.events %}
<div class="art-homepage-events">
<h2 class="art-homepage-events__heading">{{ homepageEvents.heading }}</h2>
<div class="art-homepage-events__container">
<div class="art-homepage-events__events">
{% for event in homepageEvents.events %}
<div class="art-homepage-events__event">
{% include 'partials/event-card/event-card.twig' with {event: event, noImage: true} %}
</div>
{% endfor %}
</div>
<div class="art-homepage-events__call-to-action">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
icon: 'right-chevron',
type: 'primary',
text: homepageEvents.callToAction.text,
url: homepageEvents.callToAction.url
}
} %}
</div>
</div>
</div>
{% endif %}
{
"siteUnit": "art",
"departmentName": "School of Art and Design",
"background": "light",
"homepageEvents": {
"heading": "Upcoming events",
"events": [
{
"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"
}
],
"addImage": true,
"featuredImage": {
"src": "https://picsum.photos/800/600?random=1",
"altText": "friendly kitten"
}
},
{
"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"
}
],
"addImage": true,
"featuredImage": {
"src": "https://picsum.photos/800/600?random=1",
"altText": "friendly kitten"
}
},
{
"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"
}
],
"addImage": true,
"featuredImage": {
"src": "https://picsum.photos/800/600?random=1",
"altText": "friendly kitten"
}
},
{
"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"
}
],
"addImage": true,
"featuredImage": {
"src": "https://picsum.photos/800/600?random=1",
"altText": "friendly kitten"
}
}
],
"callToAction": {
"url": "https://google.com",
"text": "See all events"
}
}
}
.art-homepage-events
background-color cloud
padding-bottom 128px
+above(mediumDeviceBreakpoint)
padding-bottom 160px
+above(largeDeviceBreakpoint)
padding-bottom 208px
&__container
@extends $contentContainer
&__heading
@extends $billboardSmallTitle
text-align center
color charcoalLighter
margin-bottom 48px
+above(mediumDeviceBreakpoint)
margin-bottom 64px
&__events
display grid
grid-template-columns 1fr
grid-gap 16px
+above(1200px)
grid-template-columns 1fr 1fr
& .card-with-image
--cardBackgroundColor white
margin-bottom 0
&__call-to-action
display flex
justify-content center
align-items center
margin-top 48px
+above(mediumDeviceBreakpoint)
margin-top 64px
There are no notes for this item.