VCUarts Component Library

Research 

<!-- Research -->
<div class="research">
    <div class="research_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="research_header_inner">
                    <h2 class="research_title">Creative Research</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="research_body">
        <div class="research_intro">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="research_intro_inner">
                        <div class="research_intro_header">
                            <h3 class="research_intro_title"><span class="research_intro_title_label">VCUarts challenges rigid arts practices and education.</span></h3>
                        </div>
                        <div class="research_intro_body">
                            <div class="research_intro_description">
                                <p>At VCUarts, you'll regularly blend traditionally isolated practices and flex your creative muscles across disciplines.</p>
                                <p>Explore some of the stories and work defining research at VCUarts.</p>
                            </div>
                            <div class="research_intro_action">

                                <a href="#" class="research_intro_action_link">
                                    <span class="research_intro_action_link_inner">
                                        <span class="research_intro_action_link_label">Explore Research & Work</span><span class="icon_nowrap research_intro_action_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_arrow_right">
                                                <use href="/images/icons.svg#arrow_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="research_carousel_wrapper">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="research_carousel_inner">
                        <div class="js-carousel research_carousel" data-carousel-options='{"contained": false, "controls": true, "pagination": true, "show": {"740px": 2}}'>
                            <div class="research_carousel_item">
                                <div class="research_carousel_item_inner">
                                    <div class="research_carousel_item_media">
                                        <figure class="research_carousel_item_figure">

                                            <img class="research_carousel_item_image" srcset="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="(min-width: 980px) 0, 98vw" src="https://images.fastspot.com/vcuarts/300x200/10" alt="" loading="lazy" width="300" height="200">
                                        </figure>
                                    </div>
                                    <div class="research_carousel_item_group">
                                        <h4 class="research_carousel_item_title">Together Apart</h4>
                                        <p class="research_carousel_item_description">Together//Apart, a collaboration between Dance + Choreography and Kinetic Imaging faculty member Dr. Kate Sicchio, VCU Engineering faculty member Dr. Patrick Martin and The Hive Lab. It's a series of choreographic performances that reflect creative human-robot team research into the symbiotic relationship between dance and engineering.</p>
                                        <div class="research_carousel_item_categories">Performance, Dance, Technology</div>
                                        <div class="research_carousel_item_action">

                                            <a href="#" class="research_carousel_item_action_link" aria-label="Together Apart">
                                                <span class="research_carousel_item_action_link_inner">
                                                    <span class="research_carousel_item_action_link_label">Explore Story</span><span class="icon_nowrap research_carousel_item_action_link_icon" aria-hidden="true">&#xfeff;
                                                        <svg class="icon icon_arrow_right">
                                                            <use href="/images/icons.svg#arrow_right" />
                                                        </svg>
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="research_carousel_item">
                                <div class="research_carousel_item_inner">
                                    <div class="research_carousel_item_media">
                                        <figure class="research_carousel_item_figure">

                                            <img class="research_carousel_item_image" srcset="https://images.fastspot.com/vcuarts/740x494/12 740w, https://images.fastspot.com/vcuarts/500x334/12 500w, https://images.fastspot.com/vcuarts/300x200/12 300w" sizes="(min-width: 980px) 0, 98vw" src="https://images.fastspot.com/vcuarts/300x200/12" alt="" loading="lazy" width="300" height="200">
                                        </figure>
                                    </div>
                                    <div class="research_carousel_item_group">
                                        <h4 class="research_carousel_item_title">Artwork Title</h4>
                                        <p class="research_carousel_item_description">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
                                        <div class="research_carousel_item_categories">Aenean leo ligula, Porttitor eu, Phasellus viverra</div>
                                        <div class="research_carousel_item_action">

                                            <a href="#" class="research_carousel_item_action_link" aria-label="Artwork Title">
                                                <span class="research_carousel_item_action_link_inner">
                                                    <span class="research_carousel_item_action_link_label">Explore Story</span><span class="icon_nowrap research_carousel_item_action_link_icon" aria-hidden="true">&#xfeff;
                                                        <svg class="icon icon_arrow_right">
                                                            <use href="/images/icons.svg#arrow_right" />
                                                        </svg>
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="research_carousel_item">
                                <div class="research_carousel_item_inner">
                                    <div class="research_carousel_item_media">
                                        <figure class="research_carousel_item_figure">

                                            <img class="research_carousel_item_image" srcset="https://images.fastspot.com/vcuarts/740x494/13 740w, https://images.fastspot.com/vcuarts/500x334/13 500w, https://images.fastspot.com/vcuarts/300x200/13 300w" sizes="(min-width: 980px) 0, 98vw" src="https://images.fastspot.com/vcuarts/300x200/13" alt="" loading="lazy" width="300" height="200">
                                        </figure>
                                    </div>
                                    <div class="research_carousel_item_group">
                                        <h4 class="research_carousel_item_title">Consectetuer Adipiscing Elit</h4>
                                        <p class="research_carousel_item_description">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
                                        <div class="research_carousel_item_categories">Technology</div>
                                        <div class="research_carousel_item_action">

                                            <a href="#" class="research_carousel_item_action_link" aria-label="Consectetuer Adipiscing Elit">
                                                <span class="research_carousel_item_action_link_inner">
                                                    <span class="research_carousel_item_action_link_label">Explore Story</span><span class="icon_nowrap research_carousel_item_action_link_icon" aria-hidden="true">&#xfeff;
                                                        <svg class="icon icon_arrow_right">
                                                            <use href="/images/icons.svg#arrow_right" />
                                                        </svg>
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="js-research research_list_wrapper">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="research_list_inner">
                        <ul class="research_list" aria-label="Creative Research">
                            <li class="js-research-item research_item research_item_1">
                                <div class="research_item_media">
                                    <figure class="research_item_figure">

                                        <img class="research_item_image" srcset="https://images.fastspot.com/vcuarts/1440x960/10 1440w, https://images.fastspot.com/vcuarts/1220x814/10 1220w, 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="(min-width: 1394px) 1080px, (min-width: 1220px) 930px, (min-width: 980px) 745px, 0" src="https://images.fastspot.com/vcuarts/300x200/10" alt="" loading="lazy" width="300" height="200">
                                    </figure>
                                </div>
                                <button class="js-research-toggle js-swap research_item_toggle" data-swap-options='{"collapse": false}' data-swap-target=".research_item_1" data-swap-group="research_list" data-swap-active="true">
                                    <span class="research_item_toggle_label">Together Apart</span>
                                </button>
                                <div class="research_item_inner">
                                    <div class="js-research-item-content research_item_group">
                                        <div class="research_item_group_inner">
                                            <h4 class="js-research-item-title research_item_title" tabindex="-1">Together Apart</h4>
                                            <p class="research_item_description">Together//Apart, a collaboration between Dance + Choreography and Kinetic Imaging faculty member Dr. Kate Sicchio, VCU Engineering faculty member Dr. Patrick Martin and The Hive Lab. It's a series of choreographic performances that reflect creative human-robot team research into the symbiotic relationship between dance and engineering.</p>
                                            <p class="research_item_category">Performance, Dance, Technology</p>
                                            <div class="research_item_action">

                                                <a href="#" class="research_item_action_link" aria-label="Together Apart">
                                                    <span class="research_item_action_link_inner">
                                                        <span class="research_item_action_link_label">Explore Story</span><span class="icon_nowrap research_item_action_link_icon" aria-hidden="true">&#xfeff;
                                                            <svg class="icon icon_arrow_right">
                                                                <use href="/images/icons.svg#arrow_right" />
                                                            </svg>
                                                        </span>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="js-research-item research_item research_item_2">
                                <div class="research_item_media">
                                    <figure class="research_item_figure">

                                        <img class="research_item_image" srcset="https://images.fastspot.com/vcuarts/1440x960/12 1440w, https://images.fastspot.com/vcuarts/1220x814/12 1220w, https://images.fastspot.com/vcuarts/980x654/12 980w, https://images.fastspot.com/vcuarts/740x494/12 740w, https://images.fastspot.com/vcuarts/500x334/12 500w, https://images.fastspot.com/vcuarts/300x200/12 300w" sizes="(min-width: 1394px) 1080px, (min-width: 1220px) 930px, (min-width: 980px) 745px, 0" src="https://images.fastspot.com/vcuarts/300x200/12" alt="" loading="lazy" width="300" height="200">
                                    </figure>
                                </div>
                                <button class="js-research-toggle js-swap research_item_toggle" data-swap-options='{"collapse": false}' data-swap-target=".research_item_2" data-swap-group="research_list">
                                    <span class="research_item_toggle_label">Artwork Title</span>
                                </button>
                                <div class="research_item_inner">
                                    <div class="js-research-item-content research_item_group">
                                        <div class="research_item_group_inner">
                                            <h4 class="js-research-item-title research_item_title" tabindex="-1">Artwork Title</h4>
                                            <p class="research_item_description">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
                                            <p class="research_item_category">Aenean leo ligula, Porttitor eu, Phasellus viverra</p>
                                            <div class="research_item_action">

                                                <a href="#" class="research_item_action_link" aria-label="Artwork Title">
                                                    <span class="research_item_action_link_inner">
                                                        <span class="research_item_action_link_label">Explore Story</span><span class="icon_nowrap research_item_action_link_icon" aria-hidden="true">&#xfeff;
                                                            <svg class="icon icon_arrow_right">
                                                                <use href="/images/icons.svg#arrow_right" />
                                                            </svg>
                                                        </span>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="js-research-item research_item research_item_3">
                                <div class="research_item_media">
                                    <figure class="research_item_figure">

                                        <img class="research_item_image" srcset="https://images.fastspot.com/vcuarts/1440x960/13 1440w, https://images.fastspot.com/vcuarts/1220x814/13 1220w, https://images.fastspot.com/vcuarts/980x654/13 980w, https://images.fastspot.com/vcuarts/740x494/13 740w, https://images.fastspot.com/vcuarts/500x334/13 500w, https://images.fastspot.com/vcuarts/300x200/13 300w" sizes="(min-width: 1394px) 1080px, (min-width: 1220px) 930px, (min-width: 980px) 745px, 0" src="https://images.fastspot.com/vcuarts/300x200/13" alt="" loading="lazy" width="300" height="200">
                                    </figure>
                                </div>
                                <button class="js-research-toggle js-swap research_item_toggle" data-swap-options='{"collapse": false}' data-swap-target=".research_item_3" data-swap-group="research_list">
                                    <span class="research_item_toggle_label">Consectetuer Adipiscing Elit</span>
                                </button>
                                <div class="research_item_inner">
                                    <div class="js-research-item-content research_item_group">
                                        <div class="research_item_group_inner">
                                            <h4 class="js-research-item-title research_item_title" tabindex="-1">Consectetuer Adipiscing Elit</h4>
                                            <p class="research_item_description">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
                                            <p class="research_item_category">Technology</p>
                                            <div class="research_item_action">

                                                <a href="#" class="research_item_action_link" aria-label="Consectetuer Adipiscing Elit">
                                                    <span class="research_item_action_link_inner">
                                                        <span class="research_item_action_link_label">Explore Story</span><span class="icon_nowrap research_item_action_link_icon" aria-hidden="true">&#xfeff;
                                                            <svg class="icon icon_arrow_right">
                                                                <use href="/images/icons.svg#arrow_right" />
                                                            </svg>
                                                        </span>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Research -->
 
{#
	{% include '@component-research' with {
		group_label: 'Group Label',
		group_title: 'Group Title',
		group_description:"<p>Group Description</p>",
		group_link: {
			label: 'Group Link Label',
			url: '#'
		},
		items: [
			{
				title: 'Item Title',
				image: '1',
				alt: '',
				description:'Item Description',
				categories: ['Item Category'],
				url: '#'
			}
		]
	} %}
#}

<!-- Research -->
<div class="research">
	<div class="research_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="research_header_inner">
					<h2 class="research_title">{{ group_label }}</h2>
				</div>
			</div>
		</div>
	</div>
	<div class="research_body">
		<div class="research_intro">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="research_intro_inner">
						<div class="research_intro_header">
							<h3 class="research_intro_title"><span class="research_intro_title_label">{{ group_title }}</span></h3>
						</div>
						<div class="research_intro_body">
							<div class="research_intro_description">{{ group_description }}</div>
							<div class="research_intro_action">
								{% include '@partial-link' with {
									class: 'research_intro_action',
									title: group_link.label,
									url: group_link.url,
									icon: 'arrow_right',
									nowrap: true
								} %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="research_carousel_wrapper">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="research_carousel_inner">
						<div class="js-carousel research_carousel" data-carousel-options='{"contained": false, "controls": true, "pagination": true, "show": {"740px": 2}}'>
							{% for item in items %}
								<div class="research_carousel_item">
									<div class="research_carousel_item_inner">
										<div class="research_carousel_item_media">
											<figure class="research_carousel_item_figure">
												{% include '@partial-image' with {
													class: 'research_carousel_item',
													alt: '',
													image: item.image,
													loading: 'lazy',
													sources: [
														img.classic.sml,
														img.classic.xsml,
														img.classic.xxsml
													],
													sizes: [
														"(min-width: 980px) 0",
														"98vw"
													]
												} %}
											</figure>
										</div>
										<div class="research_carousel_item_group">
											<h4 class="research_carousel_item_title">{{ item.title }}</h4>
											<p class="research_carousel_item_description">{{ item.description }}</p>
											<div class="research_carousel_item_categories">{% for category in item.categories %}{{ category }}{% if not loop.last %}, {% endif %}{% endfor %}</div>
											<div class="research_carousel_item_action">
												{% include '@partial-link' with {
													class: 'research_carousel_item_action',
													title: 'Explore Story',
													aria: item.title,
													url: item.url,
													icon: 'arrow_right',
													nowrap: true
												} %}
											</div>
										</div>
									</div>
								</div>
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="js-research research_list_wrapper">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="research_list_inner">
						<ul class="research_list" aria-label="{{ group_label }}">
							{% for item in items %}
								<li class="js-research-item research_item research_item_{{ loop.index }}">
									<div class="research_item_media">
										<figure class="research_item_figure">
											{% include '@partial-image' with {
												class: 'research_item',
												alt: '',
												image: item.image,
												loading: 'lazy',
												sources: [
													img.classic.xlrg,
													img.classic.lrg,
													img.classic.med,
													img.classic.sml,
													img.classic.xsml,
													img.classic.xxsml
												],
												sizes: [
													"(min-width: 1394px) 1080px",
													"(min-width: 1220px) 930px",
													"(min-width: 980px) 745px",
													"0"
												]
											} %}
										</figure>
									</div>
									<button class="js-research-toggle js-swap research_item_toggle" data-swap-options='{"collapse": false}' data-swap-target=".research_item_{{ loop.index }}" data-swap-group="research_list"{% if loop.index == 1 %} data-swap-active="true"{% endif %}>
										<span class="research_item_toggle_label">{{ item.title }}</span>
									</button>
									<div class="research_item_inner">
										<div class="js-research-item-content research_item_group">
											<div class="research_item_group_inner">
												<h4 class="js-research-item-title research_item_title" tabindex="-1">{{ item.title }}</h4>
												<p class="research_item_description">{{ item.description }}</p>
												<p class="research_item_category">{% for category in item.categories %}{{ category }}{% if not loop.last %}, {% endif %}{% endfor %}</p>
												<div class="research_item_action">
													{% include '@partial-link' with {
														class: 'research_item_action',
														title: 'Explore Story',
														aria: item.title,
														url: item.url,
														icon: 'arrow_right',
														nowrap: true
													} %}
												</div>
											</div>
										</div>
									</div>
								</li>
							{% endfor %}
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Research -->

No notes defined.