<!-- Featured News & Events -->
<div class="featured_news_events">
<div class="fs-row">
<div class="fs-cell">
<div class="featured_news_events_inner">
<div class="updates_grid">
<div class="updates_featured">
<div class="updates_featured_item updates_featured_event">
<div class="updates_featured_media">
<figure class="updates_featured_item_figure">
<a class="updates_featured_item_figure_link" href="#" aria-label="Read more about Blending Art and Advocacy: A conversation with award-winning actress Mikayla Bartholomew" tabindex="-1">
<picture class="updates_featured_item_picture">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/vcuarts/1440x960/1" width="1440" height="960">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/vcuarts/1220x814/1" width="1220" height="814">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/vcuarts/1220x686/1" width="1220" height="686">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/vcuarts/980x552/1" width="980" height="552">
<img class="updates_featured_item_image" src="//images.fastspot.com/vcuarts/740x416/1" alt="" loading="lazy" width="740" height="416">
</picture>
</a>
</figure>
<div class="updates_featured_item_calendar">
<span class="updates_featured_item_calendar_item">
<span class="updates_featured_item_calendar_month">Nov</span>
<span class="updates_featured_item_calendar_day">1</span>
</span>
<span class="updates_featured_item_calendar_separator"></span>
<span class="updates_featured_item_calendar_item">
<span class="updates_featured_item_calendar_month">Nov</span>
<span class="updates_featured_item_calendar_day">3</span>
</span>
</div>
</div>
<div class="updates_featured_item_wrapper">
<div class="updates_featured_item_header">
<h2 class="updates_featured_item_title">
<a href="#" class="updates_featured_item_title_link">
<span class="updates_featured_item_title_link_inner">
<span class="updates_featured_item_title_link_label">Blending Art and Advocacy: A conversation with award-winning actress Mikayla Bartholomew</span>
</span>
</a>
</h2>
<div class="updates_featured_item_meta">
<div class="updates_featured_item_categories">
<ul class="updates_featured_item_categories_list" aria-label="Categories">
<li class="updates_featured_item_categories_item">
<a class="updates_featured_item_categories_link" href="#">Event Category One</a>,
</li>
<li class="updates_featured_item_categories_item">
<a class="updates_featured_item_categories_link" href="#">Event Category Two</a>
</li>
</ul>
</div>
<div class="updates_featured_item_separator"></div>
<div class="updates_featured_item_organizer">
<span class="updates_featured_item_organizer_label">Organizer</span>
</div>
</div>
</div>
<div class="updates_featured_item_body">
<time class="updates_featured_item_date" datetime="2023-11-01 14:00:00">
<span class="updates_featured_item_date_start">Nov 1, 2023</span>
<span class="updates_featured_item_date_end"> - Nov 3, 2023</span>
@
<span class="updates_featured_item_date_time">2:00 PM - 3:00 PM</span>
</time>
<div class="updates_featured_item_location">
<span class="updates_featured_item_location_label">W. E. Singleton Center for the Performing Arts</span>
</div>
</div>
</div>
</div>
</div>
<div class="updates_events">
<div class="updates_events_body">
<div class="updates_events_item">
<div class="updates_events_item_media">
<figure class="updates_events_item_figure">
<a class="updates_events_item_figure_link" href="#" aria-label="Read more about Morgan Bassichis: More Little Ditties" tabindex="-1">
<img class="updates_events_item_image" srcset="https://images.fastspot.com/vcuarts/980x654/14 980w, https://images.fastspot.com/vcuarts/740x494/14 740w, https://images.fastspot.com/vcuarts/500x334/14 500w, https://images.fastspot.com/vcuarts/300x200/14 300w" sizes="25vw" src="https://images.fastspot.com/vcuarts/300x200/14" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="updates_events_item_calendar">
<span class="updates_events_item_calendar_item">
<span class="updates_events_item_calendar_month">Nov</span>
<span class="updates_events_item_calendar_day">1</span>
</span>
<span class="updates_events_item_calendar_separator"></span>
<span class="updates_events_item_calendar_item">
<span class="updates_events_item_calendar_month">Nov</span>
<span class="updates_events_item_calendar_day">3</span>
</span>
</div>
</div>
<div class="updates_events_item_wrapper">
<div class="updates_events_item_header">
<h2 class="updates_events_item_title">
<a href="#" class="updates_events_item_title_link">
<span class="updates_events_item_title_link_inner">
<span class="updates_events_item_title_link_label">Morgan Bassichis: More Little Ditties</span>
</span>
</a>
</h2>
<div class="updates_events_item_meta">
<div class="updates_events_item_categories">
<ul class="updates_events_item_categories_list" aria-label="Categories">
<li class="updates_events_item_categories_item">
<a class="updates_events_item_categories_link" href="#">Event Category One</a>,
</li>
<li class="updates_events_item_categories_item">
<a class="updates_events_item_categories_link" href="#">Event Category Two</a>
</li>
</ul>
</div>
<div class="updates_events_item_separator"></div>
<div class="updates_events_item_organizer">
<span class="updates_events_item_organizer_label">Organizer</span>
</div>
</div>
</div>
<div class="updates_events_item_body">
<time class="updates_events_item_date" datetime="2023-11-01 14:00:00">
<span class="updates_events_item_date_start">Nov 1, 2023</span>
<span class="updates_events_item_date_end"> - Nov 3, 2023</span>
@
<span class="updates_events_item_date_time">2:00 PM - 3:00 PM</span>
</time>
<div class="updates_events_item_location">
<span class="updates_events_item_location_label">W. E. Singleton Center for the Performing Arts</span>
</div>
</div>
</div>
</div>
<div class="updates_events_item">
<div class="updates_events_item_media">
<figure class="updates_events_item_figure">
<a class="updates_events_item_figure_link" href="#" aria-label="Read more about Morgan Bassichis: More Little Ditties" tabindex="-1">
<img class="updates_events_item_image" srcset="https://images.fastspot.com/vcuarts/980x654/10 980w, https://images.fastspot.com/vcuarts/740x494/10 740w, https://images.fastspot.com/vcuarts/500x334/10 500w, https://images.fastspot.com/vcuarts/300x200/10 300w" sizes="25vw" src="https://images.fastspot.com/vcuarts/300x200/10" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="updates_events_item_calendar">
<span class="updates_events_item_calendar_item">
<span class="updates_events_item_calendar_month">Oct</span>
<span class="updates_events_item_calendar_day">22</span>
</span>
</div>
</div>
<div class="updates_events_item_wrapper">
<div class="updates_events_item_header">
<h2 class="updates_events_item_title">
<a href="#" class="updates_events_item_title_link">
<span class="updates_events_item_title_link_inner">
<span class="updates_events_item_title_link_label">Morgan Bassichis: More Little Ditties</span>
</span>
</a>
</h2>
<div class="updates_events_item_meta">
<div class="updates_events_item_categories">
<ul class="updates_events_item_categories_list" aria-label="Categories">
<li class="updates_events_item_categories_item">
<a class="updates_events_item_categories_link" href="#">Event Category</a>
</li>
</ul>
</div>
<div class="updates_events_item_separator"></div>
<div class="updates_events_item_organizer">
<span class="updates_events_item_organizer_label">Organizer</span>
</div>
</div>
</div>
<div class="updates_events_item_body">
<time class="updates_events_item_date" datetime="2023-10-22 14:00:00">
<span class="updates_events_item_date_start">Oct 22, 2023</span>
@
<span class="updates_events_item_date_time">2:00 PM - 3:00 PM</span>
</time>
<div class="updates_events_item_location">
<span class="updates_events_item_location_label">W. E. Singleton Center for the Performing Arts</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Featured News & Events -->
{#
{% include '@component-featured-news-events' with {
featured: {
type: 'event',
image: '1',
alt: '',
date: {
same_day: false,
all_day: false,
from: '2023-11-01 14:00:00',
to: '2023-11-03 15:00:00'
},
title: 'Featured Title',
url: '#',
location: 'Featured Location',
organizer: 'Featured Organizer',
categories: [
{
label: 'Featured Category',
url: '#'
}
]
},
events: [
{
image: '6',
alt: '',
date: {
same_day: true,
all_day: false,
from: '2023-10-22 14:00:00',
to: '2023-10-22 15:00:00'
},
title: 'Event Title',
url: '#',
location: 'Event Location',
organizer: 'Event Organizer',
categories: [
{
label: 'Event Category',
url: '#'
}
]
}
],
news: [
{
image: '8',
alt: '',
title: 'News Title',
publish: '2023-01-23 14:00:00',
url: '#',
department: 'News Department',
categories: [
{
label: 'News Category',
url: '#'
}
]
}
]
} %}
#}
<!-- Featured News & Events -->
<div class="featured_news_events">
<div class="fs-row">
<div class="fs-cell">
<div class="featured_news_events_inner">
<div class="updates_grid">
<div class="updates_featured">
{% if featured.type == 'event' %}
<div class="updates_featured_item updates_featured_event">
<div class="updates_featured_media">
<figure class="updates_featured_item_figure">
<a class="updates_featured_item_figure_link" href="{{ featured.url }}" aria-label="Read more about {{ featured.title }}" tabindex="-1">
{% include '@partial-picture' with {
class: 'updates_featured_item',
image: featured.image,
alt: '',
loading: 'lazy',
default: img.wide.sml,
sources: {
'1220px': img.classic.xlrg,
'980px': img.classic.lrg,
'740px': img.wide.lrg,
'500px': img.wide.med
}
} %}
</a>
</figure>
<div class="updates_featured_item_calendar">
<span class="updates_featured_item_calendar_item">
<span class="updates_featured_item_calendar_month">{{ featured.date.from|date('M') }}</span>
<span class="updates_featured_item_calendar_day">{{ featured.date.from|date('j') }}</span>
</span>
{% if featured.date.same_day == false %}
<span class="updates_featured_item_calendar_separator"></span>
<span class="updates_featured_item_calendar_item">
<span class="updates_featured_item_calendar_month">{{ featured.date.to|date('M') }}</span>
<span class="updates_featured_item_calendar_day">{{ featured.date.to|date('j') }}</span>
</span>
{% endif %}
</div>
</div>
<div class="updates_featured_item_wrapper">
<div class="updates_featured_item_header">
<h2 class="updates_featured_item_title">
{% include '@partial-link' with {
class: 'updates_featured_item_title',
title: featured.title,
url: featured.url
} %}
</h2>
<div class="updates_featured_item_meta">
<div class="updates_featured_item_categories">
<ul class="updates_featured_item_categories_list" aria-label="Categories">
{% for category in featured.categories %}
<li class="updates_featured_item_categories_item">
<a class="updates_featured_item_categories_link" href="{{ category.url }}">{{ category.label }}</a>{% if not loop.last %}, {% endif %}
</li>
{% endfor %}
</ul>
</div>
<div class="updates_featured_item_separator"></div>
<div class="updates_featured_item_organizer">
<span class="updates_featured_item_organizer_label">{{ featured.organizer }}</span>
</div>
</div>
</div>
<div class="updates_featured_item_body">
<time class="updates_featured_item_date" datetime="{{ featured.date.from }}">
<span class="updates_featured_item_date_start">{{ featured.date.from|date('M j, Y') }}</span>
{% if featured.date.same_day == false %}
<span class="updates_featured_item_date_end"> - {{ featured.date.to|date('M j, Y') }}</span>
{% endif %}
@
<span class="updates_featured_item_date_time">{{ featured.date.from|date('g:i A') }} - {{ featured.date.to|date('g:i A') }}</span>
</time>
<div class="updates_featured_item_location">
<span class="updates_featured_item_location_label">{{ featured.location }}</span>
</div>
</div>
</div>
</div>
{% elseif featured.type == 'news' %}
<div class="updates_featured_item updates_featured_news">
<div class="updates_featured_media">
<figure class="updates_featured_item_figure">
<a class="updates_featured_item_figure_link" href="{{ featured.url }}" aria-label="Read more about {{ featured.title }}" tabindex="-1">
{% include '@partial-picture' with {
class: 'updates_featured_item',
image: featured.image,
alt: '',
loading: 'lazy',
default: img.wide.sml,
sources: {
'1220px': img.classic.xlrg,
'980px': img.classic.lrg,
'740px': img.wide.lrg,
'500px': img.wide.med
}
} %}
</a>
</figure>
</div>
<div class="updates_featured_item_wrapper">
<div class="updates_featured_item_header">
<h2 class="updates_featured_item_title">
{% include '@partial-link' with {
class: 'updates_featured_item_title',
title: featured.title,
url: featured.url
} %}
</h2>
<div class="updates_featured_item_meta">
<div class="updates_featured_item_categories">
<ul class="updates_featured_item_categories_list" aria-label="Categories">
{% for category in featured.categories %}
<li class="updates_featured_item_categories_item">
<a class="updates_featured_item_categories_link" href="{{ category.url }}">{{ category.label }}</a>{% if not loop.last %}, {% endif %}
</li>
{% endfor %}
</ul>
</div>
<div class="updates_featured_item_separator"></div>
<div class="updates_featured_item_departments">
<ul class="updates_featured_item_departments_list" aria-label="Departments">
{% for department in featured.departments %}
<li class="updates_featured_item_departments_item">
<a class="updates_featured_item_departments_link" href="{{ department.url }}">{{ department.label }}</a>{% if not loop.last %}, {% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="updates_featured_item_body">
<div class="updates_featured_item_publish">
<span class="updates_featured_item_publish_label">{{ featured.publish|date('m/d/Y') }}</span>
</div>
</div>
</div>
</div>
{% endif %}
</div>
<div class="updates_events">
<div class="updates_events_body">
{% for event in events %}
<div class="updates_events_item">
<div class="updates_events_item_media">
<figure class="updates_events_item_figure">
<a class="updates_events_item_figure_link" href="{{ event.url }}" aria-label="Read more about {{ event.title }}" tabindex="-1">
{% include '@partial-image' with {
class: 'updates_events_item',
alt: '',
image: event.image,
loading: 'lazy',
sources: [
img.classic.med,
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
],
sizes: [
"25vw"
]
} %}
</a>
</figure>
<div class="updates_events_item_calendar">
<span class="updates_events_item_calendar_item">
<span class="updates_events_item_calendar_month">{{ event.date.from|date('M') }}</span>
<span class="updates_events_item_calendar_day">{{ event.date.from|date('j') }}</span>
</span>
{% if event.date.same_day == false %}
<span class="updates_events_item_calendar_separator"></span>
<span class="updates_events_item_calendar_item">
<span class="updates_events_item_calendar_month">{{ event.date.to|date('M') }}</span>
<span class="updates_events_item_calendar_day">{{ event.date.to|date('j') }}</span>
</span>
{% endif %}
</div>
</div>
<div class="updates_events_item_wrapper">
<div class="updates_events_item_header">
<h2 class="updates_events_item_title">
{% include '@partial-link' with {
class: 'updates_events_item_title',
title: event.title,
url: event.url
} %}
</h2>
<div class="updates_events_item_meta">
<div class="updates_events_item_categories">
<ul class="updates_events_item_categories_list" aria-label="Categories">
{% for category in event.categories %}
<li class="updates_events_item_categories_item">
<a class="updates_events_item_categories_link" href="{{ category.url }}">{{ category.label }}</a>{% if not loop.last %}, {% endif %}
</li>
{% endfor %}
</ul>
</div>
<div class="updates_events_item_separator"></div>
<div class="updates_events_item_organizer">
<span class="updates_events_item_organizer_label">{{ event.organizer }}</span>
</div>
</div>
</div>
<div class="updates_events_item_body">
<time class="updates_events_item_date" datetime="{{ event.date.from }}">
<span class="updates_events_item_date_start">{{ event.date.from|date('M j, Y') }}</span>
{% if event.date.same_day == false %}
<span class="updates_events_item_date_end"> - {{ event.date.to|date('M j, Y') }}</span>
{% endif %}
@
<span class="updates_events_item_date_time">{{ event.date.from|date('g:i A') }} - {{ event.date.to|date('g:i A') }}</span>
</time>
<div class="updates_events_item_location">
<span class="updates_events_item_location_label">{{ event.location }}</span>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Featured News & Events -->
No notes defined.