No notes defined.
<div class="calendar">
<ul class="calendar__items">
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">Dec</span>
<span class="calendar__number">20</span>
</div>
<p class="calendar__desc">Backpack Opens for Winter Semester</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 10.936V14.936M7 12.936H11M1 6.93604H17M13 1.93604V3.93604M5 1.93604V3.93604M1 2.93604H17V16.936C17 17.4665 16.7893 17.9752 16.4142 18.3502C16.0391 18.7253 15.5304 18.936 15 18.936H3C2.46957 18.936 1.96086 18.7253 1.58579 18.3502C1.21071 17.9752 1 17.4665 1 16.936V2.93604Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg> </i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">Jun</span>
<span class="calendar__number">21</span>
</div>
<p class="calendar__desc">Winter Registration: Begins by Appointment for Graduate Students (November 13-15)</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 10.936V14.936M7 12.936H11M1 6.93604H17M13 1.93604V3.93604M5 1.93604V3.93604M1 2.93604H17V16.936C17 17.4665 16.7893 17.9752 16.4142 18.3502C16.0391 18.7253 15.5304 18.936 15 18.936H3C2.46957 18.936 1.96086 18.7253 1.58579 18.3502C1.21071 17.9752 1 17.4665 1 16.936V2.93604Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg> </i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">Jan</span>
<span class="calendar__number">8</span>
</div>
<p class="calendar__desc">Winter Registration: Begins by Appointment for Undergraduate Students (November 16 - December 1)</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 10.936V14.936M7 12.936H11M1 6.93604H17M13 1.93604V3.93604M5 1.93604V3.93604M1 2.93604H17V16.936C17 17.4665 16.7893 17.9752 16.4142 18.3502C16.0391 18.7253 15.5304 18.936 15 18.936H3C2.46957 18.936 1.96086 18.7253 1.58579 18.3502C1.21071 17.9752 1 17.4665 1 16.936V2.93604Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg> </i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">Jul</span>
<span class="calendar__number">25</span>
</div>
<p class="calendar__desc">Thanksgiving Break (November 22-24)</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 10.936V14.936M7 12.936H11M1 6.93604H17M13 1.93604V3.93604M5 1.93604V3.93604M1 2.93604H17V16.936C17 17.4665 16.7893 17.9752 16.4142 18.3502C16.0391 18.7253 15.5304 18.936 15 18.936H3C2.46957 18.936 1.96086 18.7253 1.58579 18.3502C1.21071 17.9752 1 17.4665 1 16.936V2.93604Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg> </i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">Nov</span>
<span class="calendar__number">9</span>
</div>
<p class="calendar__desc">Residential Programs: Classses End</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 10.936V14.936M7 12.936H11M1 6.93604H17M13 1.93604V3.93604M5 1.93604V3.93604M1 2.93604H17V16.936C17 17.4665 16.7893 17.9752 16.4142 18.3502C16.0391 18.7253 15.5304 18.936 15 18.936H3C2.46957 18.936 1.96086 18.7253 1.58579 18.3502C1.21071 17.9752 1 17.4665 1 16.936V2.93604Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg> </i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">Dec</span>
<span class="calendar__number">7</span>
</div>
<p class="calendar__desc">Residential Programs: Classses End</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 10.936V14.936M7 12.936H11M1 6.93604H17M13 1.93604V3.93604M5 1.93604V3.93604M1 2.93604H17V16.936C17 17.4665 16.7893 17.9752 16.4142 18.3502C16.0391 18.7253 15.5304 18.936 15 18.936H3C2.46957 18.936 1.96086 18.7253 1.58579 18.3502C1.21071 17.9752 1 17.4665 1 16.936V2.93604Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg> </i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">Jan</span>
<span class="calendar__number">11</span>
</div>
<p class="calendar__desc">Short Title</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 10.936V14.936M7 12.936H11M1 6.93604H17M13 1.93604V3.93604M5 1.93604V3.93604M1 2.93604H17V16.936C17 17.4665 16.7893 17.9752 16.4142 18.3502C16.0391 18.7253 15.5304 18.936 15 18.936H3C2.46957 18.936 1.96086 18.7253 1.58579 18.3502C1.21071 17.9752 1 17.4665 1 16.936V2.93604Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg> </i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
</ul>
<a href="" class="button button--tertiary button--xs">Full academic calendar</a>
</div>
{% set titleElement = titleElement ?: 'h3' %}
{% set months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %}
<div class="calendar">
<ul class="calendar__items">
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">{{ random(months) }}</span>
<span class="calendar__number">{{ (random(27) + 1) }}</span>
</div>
<p class="calendar__desc">Backpack Opens for Winter Semester</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
{% include '@icon--calendar' %}
</i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">{{ random(months) }}</span>
<span class="calendar__number">{{ (random(27) + 1) }}</span>
</div>
<p class="calendar__desc">Winter Registration: Begins by Appointment for Graduate Students (November 13-15)</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
{% include '@icon--calendar' %}
</i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">{{ random(months) }}</span>
<span class="calendar__number">{{ (random(27) + 1) }}</span>
</div>
<p class="calendar__desc">Winter Registration: Begins by Appointment for Undergraduate Students (November 16 - December 1)</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
{% include '@icon--calendar' %}
</i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">{{ random(months) }}</span>
<span class="calendar__number">{{ (random(27) + 1) }}</span>
</div>
<p class="calendar__desc">Thanksgiving Break (November 22-24)</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
{% include '@icon--calendar' %}
</i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">{{ random(months) }}</span>
<span class="calendar__number">{{ (random(27) + 1) }}</span>
</div>
<p class="calendar__desc">Residential Programs: Classses End</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
{% include '@icon--calendar' %}
</i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">{{ random(months) }}</span>
<span class="calendar__number">{{ (random(27) + 1) }}</span>
</div>
<p class="calendar__desc">Residential Programs: Classses End</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
{% include '@icon--calendar' %}
</i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
<li class="calendar__item">
<div class="calendar__date" aria-label="[x]th Monthname" title="[x]th Monthname">
<span class="calendar__month">{{ random(months) }}</span>
<span class="calendar__number">{{ (random(27) + 1) }}</span>
</div>
<p class="calendar__desc">Short Title</p>
<div class="calendar_actions">
<a href="" class="calendar__action" title="Add to calendar">
<i class="icon">
{% include '@icon--calendar' %}
</i>
<span class="visually-hidden">Add to calendar</span>
</a>
</div>
</li>
</ul>
<a href="" class="button button--tertiary button--xs">Full academic calendar</a>
</div>
.calendar {
margin: 0 0 $spacing-2xl;
&__items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-column-gap: $grid-gutter-large;
list-style: none;
padding: 0;
margin: 0 0 $spacing-sm;
}
&__item {
display: flex;
gap: $spacing-sm;
align-items: flex-start;
border-top: 1px solid $grey--borders;
padding: $spacing-sm 0 $spacing-xs;
}
&__date {
min-width: 2.5em;
text-align: center;
}
&__month {
display: block;
background: $secondary;
padding: 0 $spacing-2xs;
@include typescale('xs');
}
&__number {
display: block;
background: $grey--lightest;
padding: $spacing-2xs;
@include typescale('lg');
font-weight: bold;
}
&__desc {
flex: 1 1 auto;
@include typescale('sm');
@include line-height('compact');
margin: 0;
}
&__actions {
justify-self: flex-end;
}
&__action {
display: block;
@include typescale('xl');
text-decoration: none;
}
}