<article class="event-card">
<div class="event-card__image">
<img width="200" height="113" src="https://placekitten.com/320/228" alt="">
</div>
<div class="event-card__content">
<div class="event-card__date">
<span class="event-card__date-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<g id="calendar_month">
<mask id="mask0_4758_12863" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4758_12863)">
<path id="calendar_month_2" d="M3.33333 14.6668C2.96667 14.6668 2.65278 14.5363 2.39167 14.2752C2.13056 14.0141 2 13.7002 2 13.3335V4.00016C2 3.6335 2.13056 3.31961 2.39167 3.0585C2.65278 2.79739 2.96667 2.66683 3.33333 2.66683H4V1.3335H5.33333V2.66683H10.6667V1.3335H12V2.66683H12.6667C13.0333 2.66683 13.3472 2.79739 13.6083 3.0585C13.8694 3.31961 14 3.6335 14 4.00016V13.3335C14 13.7002 13.8694 14.0141 13.6083 14.2752C13.3472 14.5363 13.0333 14.6668 12.6667 14.6668H3.33333ZM3.33333 13.3335H12.6667V6.66683H3.33333V13.3335ZM3.33333 5.3335H12.6667V4.00016H3.33333V5.3335ZM8 9.3335C7.81111 9.3335 7.65278 9.26961 7.525 9.14183C7.39722 9.01405 7.33333 8.85572 7.33333 8.66683C7.33333 8.47794 7.39722 8.31961 7.525 8.19183C7.65278 8.06405 7.81111 8.00016 8 8.00016C8.18889 8.00016 8.34722 8.06405 8.475 8.19183C8.60278 8.31961 8.66667 8.47794 8.66667 8.66683C8.66667 8.85572 8.60278 9.01405 8.475 9.14183C8.34722 9.26961 8.18889 9.3335 8 9.3335ZM5.33333 9.3335C5.14444 9.3335 4.98611 9.26961 4.85833 9.14183C4.73056 9.01405 4.66667 8.85572 4.66667 8.66683C4.66667 8.47794 4.73056 8.31961 4.85833 8.19183C4.98611 8.06405 5.14444 8.00016 5.33333 8.00016C5.52222 8.00016 5.68056 8.06405 5.80833 8.19183C5.93611 8.31961 6 8.47794 6 8.66683C6 8.85572 5.93611 9.01405 5.80833 9.14183C5.68056 9.26961 5.52222 9.3335 5.33333 9.3335ZM10.6667 9.3335C10.4778 9.3335 10.3194 9.26961 10.1917 9.14183C10.0639 9.01405 10 8.85572 10 8.66683C10 8.47794 10.0639 8.31961 10.1917 8.19183C10.3194 8.06405 10.4778 8.00016 10.6667 8.00016C10.8556 8.00016 11.0139 8.06405 11.1417 8.19183C11.2694 8.31961 11.3333 8.47794 11.3333 8.66683C11.3333 8.85572 11.2694 9.01405 11.1417 9.14183C11.0139 9.26961 10.8556 9.3335 10.6667 9.3335ZM8 12.0002C7.81111 12.0002 7.65278 11.9363 7.525 11.8085C7.39722 11.6807 7.33333 11.5224 7.33333 11.3335C7.33333 11.1446 7.39722 10.9863 7.525 10.8585C7.65278 10.7307 7.81111 10.6668 8 10.6668C8.18889 10.6668 8.34722 10.7307 8.475 10.8585C8.60278 10.9863 8.66667 11.1446 8.66667 11.3335C8.66667 11.5224 8.60278 11.6807 8.475 11.8085C8.34722 11.9363 8.18889 12.0002 8 12.0002ZM5.33333 12.0002C5.14444 12.0002 4.98611 11.9363 4.85833 11.8085C4.73056 11.6807 4.66667 11.5224 4.66667 11.3335C4.66667 11.1446 4.73056 10.9863 4.85833 10.8585C4.98611 10.7307 5.14444 10.6668 5.33333 10.6668C5.52222 10.6668 5.68056 10.7307 5.80833 10.8585C5.93611 10.9863 6 11.1446 6 11.3335C6 11.5224 5.93611 11.6807 5.80833 11.8085C5.68056 11.9363 5.52222 12.0002 5.33333 12.0002ZM10.6667 12.0002C10.4778 12.0002 10.3194 11.9363 10.1917 11.8085C10.0639 11.6807 10 11.5224 10 11.3335C10 11.1446 10.0639 10.9863 10.1917 10.8585C10.3194 10.7307 10.4778 10.6668 10.6667 10.6668C10.8556 10.6668 11.0139 10.7307 11.1417 10.8585C11.2694 10.9863 11.3333 11.1446 11.3333 11.3335C11.3333 11.5224 11.2694 11.6807 11.1417 11.8085C11.0139 11.9363 10.8556 12.0002 10.6667 12.0002Z" fill="white" />
</g>
</g>
</svg>
</span>
November 19, 2021
</div>
<div class="event-card__text">
<div class='event-card__title'>
<h3 class="linked-title linked-title--h3">
<a href="#" class="linked-title__link">
<span class="linked-title__link-text">Mauris nibh felis adipiscing varius adipiscing in lacinia vel tellus urna</span>
</a>
</h3>
</div>
<div class="event-card__units">
<div class="unit-list">
<ul class="unit-list__list">
<li class="unit-list__unit">Deans Office</li>
</ul>
</div>
</div>
<div class="event-card__venue">
1234 Fake st, Orlando, Florida 67890
</div>
<div class="event-card__time">
12:30 PM
</div>
<div class="event-card__tags">
<div class="tag-list">
<ul class="tag-list__list">
<span class="tag-list__icon"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<mask id="mask0_4613_118086" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4613_118086)">
<path d="M9.50016 14.2673C9.24461 14.5229 8.92794 14.6507 8.55016 14.6507C8.17239 14.6507 7.85572 14.5229 7.60016 14.2673L1.7335 8.40065C1.61127 8.27843 1.51405 8.13398 1.44183 7.96732C1.36961 7.80065 1.3335 7.62287 1.3335 7.43398V2.66732C1.3335 2.30065 1.46405 1.98676 1.72516 1.72565C1.98627 1.46454 2.30016 1.33398 2.66683 1.33398H7.4335C7.62239 1.33398 7.80016 1.3701 7.96683 1.44232C8.1335 1.51454 8.27794 1.61176 8.40016 1.73398L14.2668 7.61732C14.5224 7.87287 14.6502 8.18676 14.6502 8.55898C14.6502 8.93121 14.5224 9.2451 14.2668 9.50065L9.50016 14.2673ZM8.55016 13.334L13.3168 8.56732L7.4335 2.66732H2.66683V7.43398L8.55016 13.334ZM4.3335 5.33398C4.61127 5.33398 4.84739 5.23676 5.04183 5.04232C5.23627 4.84787 5.3335 4.61176 5.3335 4.33398C5.3335 4.05621 5.23627 3.8201 5.04183 3.62565C4.84739 3.43121 4.61127 3.33398 4.3335 3.33398C4.05572 3.33398 3.81961 3.43121 3.62516 3.62565C3.43072 3.8201 3.3335 4.05621 3.3335 4.33398C3.3335 4.61176 3.43072 4.84787 3.62516 5.04232C3.81961 5.23676 4.05572 5.33398 4.3335 5.33398Z" fill="#4E4E4E" />
</g>
</svg>
</span>
<li class="tag-list__tag">Deans Office</li>
<span class="tag-list__separator">,</span>
<li class="tag-list__tag">School of Music</li>
</ul>
</div>
</div>
</div>
</div>
</article>
<article class="event-card">
{% if post.featuredImage %}
<div class="event-card__image">
{% if post.featuredImage %}
<img width="200" height="113" src="{{ post.featuredImage.src | resize(200, 113) | towebp }}" alt="{{ post.featuredImage.alt }}">
{% endif %}
</div>
{% endif %}
<div class="event-card__content">
<div class="event-card__date">
<span class="event-card__date-icon">
{% include 'bits/icons/calendar.twig' %}
</span>
{{ post.date }}
</div>
<div class="event-card__text">
<div class='event-card__title'>
{% include 'bits/linked-title/linked-title.twig' with {
headingLevel: 3,
text: post.title,
url: post.permalink,
}%}
</div>
{% if post.units %}
<div class="event-card__units">
{% include 'partials/unit-list/unit-list.twig' with {
units: post.unitParents
}%}
</div>
{% endif %}
{% if post.venue.address %}
<div class="event-card__venue">
{{ post.venue.address ? post.venue.address ~ "," }} {{ post.venue.city ? post.venue.city ~ "," }} {{ post.venue.state }} {{ post.venue.zip }}
</div>
{% endif %}
{% if post.time %}
<div class="event-card__time">
{{ post.isAllDay ? 'All Day' : post.time }}
</div>
{% endif %}
{% if post.tags and includeTags %}
<div class="event-card__tags">
{% include 'partials/tag-list/tag-list.twig' with {
tags: post.tags
}%}
</div>
{% endif %}
</div>
</div>
</article>
{
"post": {
"title": "Mauris nibh felis adipiscing varius adipiscing in lacinia vel tellus urna",
"permalink": "#",
"startDate": "November 19, 2021",
"endDate": "November 20, 2021",
"date": "November 19, 2021",
"startTime": "12:30 PM",
"endTime": "2:30 PM",
"time": "12:30 PM",
"isAllDay": false,
"isMultiDay": false,
"venue": {
"venueId": 1234,
"title": "Campus Library",
"address": "1234 Fake st",
"city": "Orlando",
"state": "Florida",
"zip": "67890",
"directionsUrl": null,
"website": null
},
"featuredImage": {
"src": "https://placekitten.com/320/228",
"altText": "Adorable Kitten",
"focalPoint": {
"x": 0.5,
"y": 0.5
}
},
"units": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
}
],
"unitParents": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
}
],
"tags": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
}
]
},
"includeTags": true
}
.event-card
--cardBorderColor coolGray3
--cardTitleColor blue500
--cardDateColor blue500
--titleColor blue500
--detailColor blue500
--excerptColor grey500
padding-bottom 24px
container-type inline-size
border-bottom 1px solid var(--cardBorderColor)
&:not(:first-child)
padding-top 24px
&__image
border-radius 8px
display block
float right
margin 0 0 16px 24px
max-width 215px
min-width 100px
width 25%
&__content
margin 0
flex-wrap wrap
align-items flex-start
gap 0 16px
@container (width > 900px)
&
display flex
&__date
@extends $label
flex 0 0 270px
align-items center
color var(--detailColor)
display flex
margin-bottom 8px
&-icon
margin-right 8px
& svg
height 16px
width 16px
& path
fill var(--detailColor)
&__text
flex 1
&__title
margin-bottom 16px
overflow hidden
&__venue
&__time
@extends $detail
color var(--excerptColor)
&__tags
margin-top 16px
No notes defined.