<!-- Related Work -->
<div class="work_related work_related_theme_black" data-sticky-sidebar-color="light">
<div class="work_related_header">
<div class="fs-row">
<div class="fs-cell">
<div class="work_related_header_inner">
<div class="work_related_title">
<h2 class="work_related_title_primary">What We're Making</h2>
<p class="work_related_title_secondary">Ipsum Consectetur Pharetra Purus</p>
</div>
</div>
</div>
</div>
</div>
<div class="work_related_body">
<div class="fs-row">
<div class="fs-cell">
<div class="work_related_body_inner">
<div class="work_related_carousel">
<div class="js-carousel work_related_items" data-carousel-options='{"contained": false, "pagination": ".work_related_carousel_pagination", "controls": {"container": ".work_related_carousel_controls", "next":" .work_related_carousel_next", "previous": ".work_related_carousel_previous"}}'>
<div class="work_related_item">
<div class="work_related_item_inner">
<div class="work_related_item_media">
<figure class="work_related_item_figure">
<a class="work_related_item_figure_link" href="#" aria-label="Read more about Artwork Title" tabindex="-1">
<img class="work_related_item_image" srcset="https://images.fastspot.com/vcuarts/980x654/5 980w, https://images.fastspot.com/vcuarts/740x494/5 740w, https://images.fastspot.com/vcuarts/500x334/5 500w, https://images.fastspot.com/vcuarts/300x200/5 300w" sizes="(min-width: 1394px) 20vw, (min-width: 1220px) 25vw, (min-width: 980px) 38vw, (min-width: 740px) 46vw, 98vw" src="https://images.fastspot.com/vcuarts/300x200/5" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
<div class="work_related_item_wrapper">
<div class="work_related_item_header">
<h2 class="work_related_item_title">
<a class="work_related_item_title_link" href="#">
<span class="work_related_item_title_label">Artwork Title,</span> <span class="work_related_item_title_year">2023</span>
</a>
</h2>
<div class="work_related_item_meta">
<p class="work_related_item_name">Artist Name</p>
<ul class="work_related_item_categories_list" aria-label="Categories">
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Performance</a>,
</li>
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Dance</a>,
</li>
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Technology</a>
</li>
</ul>
</div>
</div>
<div class="work_related_item_body">
<p class="work_related_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas ornare viverra. Aenean eleifend sed mi at sagittis. Phasellus dapibus cursus turpis, eget convallis turpis cursus tempus. Curabitur pellentesque id nibh quis consectetur. Maecenas vel turpis ac libero mollis imperdiet eu eget dolor.</p>
</div>
</div>
</div>
</div>
<div class="work_related_item">
<div class="work_related_item_inner">
<div class="work_related_item_media">
<figure class="work_related_item_figure">
<a class="work_related_item_figure_link" href="#" aria-label="Read more about Artwork Title" tabindex="-1">
<img class="work_related_item_image" srcset="https://images.fastspot.com/vcuarts/980x654/6 980w, https://images.fastspot.com/vcuarts/740x494/6 740w, https://images.fastspot.com/vcuarts/500x334/6 500w, https://images.fastspot.com/vcuarts/300x200/6 300w" sizes="(min-width: 1394px) 20vw, (min-width: 1220px) 25vw, (min-width: 980px) 38vw, (min-width: 740px) 46vw, 98vw" src="https://images.fastspot.com/vcuarts/300x200/6" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
<div class="work_related_item_wrapper">
<div class="work_related_item_header">
<h2 class="work_related_item_title">
<a class="work_related_item_title_link" href="#">
<span class="work_related_item_title_label">Artwork Title,</span> <span class="work_related_item_title_year">2023</span>
</a>
</h2>
<div class="work_related_item_meta">
<p class="work_related_item_name">Artist Name</p>
<ul class="work_related_item_categories_list" aria-label="Categories">
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Performance</a>,
</li>
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Dance</a>,
</li>
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Technology</a>
</li>
</ul>
</div>
</div>
<div class="work_related_item_body">
<p class="work_related_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas ornare viverra. Aenean eleifend sed mi at sagittis. Phasellus dapibus cursus turpis, eget convallis turpis cursus tempus. Curabitur pellentesque id nibh quis consectetur. Maecenas vel turpis ac libero mollis imperdiet eu eget dolor.</p>
</div>
</div>
</div>
</div>
<div class="work_related_item">
<div class="work_related_item_inner">
<div class="work_related_item_media">
<figure class="work_related_item_figure">
<a class="work_related_item_figure_link" href="#" aria-label="Read more about Artwork Title" tabindex="-1">
<img class="work_related_item_image" srcset="https://images.fastspot.com/vcuarts/980x654/1 980w, https://images.fastspot.com/vcuarts/740x494/1 740w, https://images.fastspot.com/vcuarts/500x334/1 500w, https://images.fastspot.com/vcuarts/300x200/1 300w" sizes="(min-width: 1394px) 20vw, (min-width: 1220px) 25vw, (min-width: 980px) 38vw, (min-width: 740px) 46vw, 98vw" src="https://images.fastspot.com/vcuarts/300x200/1" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
<div class="work_related_item_wrapper">
<div class="work_related_item_header">
<h2 class="work_related_item_title">
<a class="work_related_item_title_link" href="#">
<span class="work_related_item_title_label">Artwork Title,</span> <span class="work_related_item_title_year">2023</span>
</a>
</h2>
<div class="work_related_item_meta">
<p class="work_related_item_name">Artist Name</p>
<ul class="work_related_item_categories_list" aria-label="Categories">
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Performance</a>,
</li>
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Dance</a>,
</li>
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Technology</a>
</li>
</ul>
</div>
</div>
<div class="work_related_item_body">
<p class="work_related_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas ornare viverra. Aenean eleifend sed mi at sagittis. Phasellus dapibus cursus turpis, eget convallis turpis cursus tempus. Curabitur pellentesque id nibh quis consectetur. Maecenas vel turpis ac libero mollis imperdiet eu eget dolor.</p>
</div>
</div>
</div>
</div>
<div class="work_related_item">
<div class="work_related_item_inner">
<div class="work_related_item_media">
<figure class="work_related_item_figure">
<a class="work_related_item_figure_link" href="#" aria-label="Read more about Artwork Title" tabindex="-1">
<img class="work_related_item_image" srcset="https://images.fastspot.com/vcuarts/980x654/8 980w, https://images.fastspot.com/vcuarts/740x494/8 740w, https://images.fastspot.com/vcuarts/500x334/8 500w, https://images.fastspot.com/vcuarts/300x200/8 300w" sizes="(min-width: 1394px) 20vw, (min-width: 1220px) 25vw, (min-width: 980px) 38vw, (min-width: 740px) 46vw, 98vw" src="https://images.fastspot.com/vcuarts/300x200/8" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
<div class="work_related_item_wrapper">
<div class="work_related_item_header">
<h2 class="work_related_item_title">
<a class="work_related_item_title_link" href="#">
<span class="work_related_item_title_label">Artwork Title,</span> <span class="work_related_item_title_year">2023</span>
</a>
</h2>
<div class="work_related_item_meta">
<p class="work_related_item_name">Artist Name</p>
<ul class="work_related_item_categories_list" aria-label="Categories">
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Performance</a>,
</li>
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Dance</a>,
</li>
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Technology</a>
</li>
</ul>
</div>
</div>
<div class="work_related_item_body">
<p class="work_related_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas ornare viverra. Aenean eleifend sed mi at sagittis. Phasellus dapibus cursus turpis, eget convallis turpis cursus tempus. Curabitur pellentesque id nibh quis consectetur. Maecenas vel turpis ac libero mollis imperdiet eu eget dolor.</p>
</div>
</div>
</div>
</div>
<div class="work_related_item">
<div class="work_related_item_inner">
<div class="work_related_item_media">
<figure class="work_related_item_figure">
<a class="work_related_item_figure_link" href="#" aria-label="Read more about Artwork Title" tabindex="-1">
<img class="work_related_item_image" srcset="https://images.fastspot.com/vcuarts/980x654/9 980w, https://images.fastspot.com/vcuarts/740x494/9 740w, https://images.fastspot.com/vcuarts/500x334/9 500w, https://images.fastspot.com/vcuarts/300x200/9 300w" sizes="(min-width: 1394px) 20vw, (min-width: 1220px) 25vw, (min-width: 980px) 38vw, (min-width: 740px) 46vw, 98vw" src="https://images.fastspot.com/vcuarts/300x200/9" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
<div class="work_related_item_wrapper">
<div class="work_related_item_header">
<h2 class="work_related_item_title">
<a class="work_related_item_title_link" href="#">
<span class="work_related_item_title_label">Artwork Title,</span> <span class="work_related_item_title_year">2023</span>
</a>
</h2>
<div class="work_related_item_meta">
<p class="work_related_item_name">Artist Name</p>
<ul class="work_related_item_categories_list" aria-label="Categories">
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Performance</a>,
</li>
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Dance</a>,
</li>
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="#">Technology</a>
</li>
</ul>
</div>
</div>
<div class="work_related_item_body">
<p class="work_related_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas ornare viverra. Aenean eleifend sed mi at sagittis. Phasellus dapibus cursus turpis, eget convallis turpis cursus tempus. Curabitur pellentesque id nibh quis consectetur. Maecenas vel turpis ac libero mollis imperdiet eu eget dolor.</p>
</div>
</div>
</div>
</div>
</div>
<div class="work_related_carousel_interface">
<div class="work_related_carousel_controls">
<button class="work_related_carousel_control work_related_carousel_previous">
<span class="work_related_carousel_control_label">previous</span>
<span class="work_related_carousel_control_icon">
<svg class="icon icon_chevron_left">
<use href="/images/icons.svg#chevron_left" />
</svg>
</span>
</button>
<button class="work_related_carousel_control work_related_carousel_next">
<span class="work_related_carousel_control_label">next</span>
<span class="work_related_carousel_control_icon">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</button>
</div>
<div class="work_related_carousel_counter">
<div class="work_related_carousel_pagination"></div>
<div class="work_related_carousel_count">
<span class="work_related_carousel_count_separator">/</span>
<span class="work_related_carousel_count_total">5</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Related Work -->
{#
{% include '@component-work-related' with {
theme: 'color',
page_nav_id: '',
title: 'Title Primary',
secondary_title: 'Title Secondary',
items: [
{
image: '5',
alt: '',
title: 'Item Title',
url: '#',
year: 'YEAR',
name: 'Item Name',
categories: [
{
label: 'Item Category',
url: '#'
}
],
description: 'Item Description'
}
]
} %}
#}
{% set sidebar_color = {
white: 'dark',
black: 'light',
} %}
<!-- Related Work -->
<div class="{% if page_nav_id %}js-page-nav-component {% endif %}work_related work_related_theme_{{ theme }}"{% if page_nav_id %} id="{{ page_nav_id }}"{% endif %} data-sticky-sidebar-color="{{ sidebar_color[theme] }}">
<div class="work_related_header">
<div class="fs-row">
<div class="fs-cell">
<div class="work_related_header_inner">
<div class="work_related_title">
<h2 class="work_related_title_primary">{{ title }}</h2>
{% if secondary_title %}
<p class="work_related_title_secondary">{{ secondary_title }}</p>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="work_related_body">
<div class="fs-row">
<div class="fs-cell">
<div class="work_related_body_inner">
<div class="work_related_carousel">
<div class="js-carousel work_related_items" data-carousel-options='{"contained": false, "pagination": ".work_related_carousel_pagination", "controls": {"container": ".work_related_carousel_controls", "next":" .work_related_carousel_next", "previous": ".work_related_carousel_previous"}}'>
{% for item in items %}
<div class="work_related_item">
<div class="work_related_item_inner">
<div class="work_related_item_media">
<figure class="work_related_item_figure">
<a class="work_related_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
{% include '@partial-image' with {
class: 'work_related_item',
alt: item.alt,
image: item.image,
loading: 'lazy',
sources: [
img.classic.med,
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
],
sizes: [
"(min-width: 1394px) 20vw",
"(min-width: 1220px) 25vw",
"(min-width: 980px) 38vw",
"(min-width: 740px) 46vw",
"98vw"
]
} %}
</a>
</figure>
</div>
<div class="work_related_item_wrapper">
<div class="work_related_item_header">
<h2 class="work_related_item_title">
<a class="work_related_item_title_link" href="{{ item.url }}">
<span class="work_related_item_title_label">{{ item.title }},</span> <span class="work_related_item_title_year">{{ item.year }}</span>
</a>
</h2>
<div class="work_related_item_meta">
<p class="work_related_item_name">{{ item.name }}</p>
<ul class="work_related_item_categories_list" aria-label="Categories">
{% for category in item.categories %}
<li class="work_related_item_categories_item">
<a class="work_related_item_categories_link" href="{{ category.url }}">{{ category.label }}</a>{% if not loop.last %}, {% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="work_related_item_body">
<p class="work_related_item_description">{{ item.description }}</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="work_related_carousel_interface">
<div class="work_related_carousel_controls">
<button class="work_related_carousel_control work_related_carousel_previous">
<span class="work_related_carousel_control_label">previous</span>
<span class="work_related_carousel_control_icon">{{ icon('chevron_left') }}</span>
</button>
<button class="work_related_carousel_control work_related_carousel_next">
<span class="work_related_carousel_control_label">next</span>
<span class="work_related_carousel_control_icon">{{ icon('chevron_right') }}</span>
</button>
</div>
<div class="work_related_carousel_counter">
<div class="work_related_carousel_pagination"></div>
<div class="work_related_carousel_count">
<span class="work_related_carousel_count_separator">/</span>
<span class="work_related_carousel_count_total">{{ items.length }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Related Work -->
No notes defined.