VCUarts Component Library

Introduction 

<!-- Introduction -->
<div class="js-introduction introduction">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="introduction_inner">
                <div class="introduction_updates">
                    <div class="introduction_updates_items">
                        <div class="introduction_updates_items_header">
                            <h2 class="introduction_updates_items_title">News & Events</h2>
                        </div>
                        <div class="introduction_updates_items_body">
                            <ul class="introduction_updates_items_list" aria-label="News & Events">
                                <li class="introduction_updates_items_item">
                                    <p class="introduction_updates_items_item_description">

                                        <a href="#" class="introduction_updates_items_item_description_link">
                                            <span class="introduction_updates_items_item_description_link_inner">
                                                <span class="introduction_updates_items_item_description_link_label">Applications are open for spring 2024 and fall 2024 undergraduate programs</span>
                                            </span>
                                        </a>
                                    </p>
                                    <div class="js-background-video-container introduction_updates_items_item_media">
                                        <div class="js-background-video-wrapper introduction_updates_items_item_video" data-background-video='{"display":"background","id":"zfWwP6hNGOM","type":"youtube","title":"VCUarts Fashion Design + Merchandising Cotton Line Program","autoplay":true}'>
                                            <div class="introduction_updates_items_item_video_iframe_wrap">
                                                <div class="introduction_updates_items_item_video_iframe_target js-iframe-target"></div>
                                            </div>

                                            <div class="introduction_updates_items_item_video_controls">

                                                <button class="introduction_updates_items_item_video_play_button js-background-video-play">
                                                    <span class="introduction_updates_items_item_video_play_button_inner">
                                                        <span class="introduction_updates_items_item_video_play_button_label">Play Video</span>
                                                        <span class="introduction_updates_items_item_video_play_button_icon" aria-hidden="true">

                                                            <svg class="icon icon_play">
                                                                <use href="/images/icons.svg#play" />
                                                            </svg>

                                                        </span>
                                                    </span>
                                                </button>

                                                <button class="introduction_updates_items_item_video_pause_button js-background-video-pause">
                                                    <span class="introduction_updates_items_item_video_pause_button_inner">
                                                        <span class="introduction_updates_items_item_video_pause_button_label">Pause Video</span>
                                                        <span class="introduction_updates_items_item_video_pause_button_icon" aria-hidden="true">

                                                            <svg class="icon icon_pause">
                                                                <use href="/images/icons.svg#pause" />
                                                            </svg>

                                                        </span>
                                                    </span>
                                                </button>
                                            </div>
                                        </div>
                                        <figure class="introduction_updates_items_item_figure">
                                            <a href="#" class="introduction_updates_items_item_figure_link" aria-label="Applications are open for spring 2024 and fall 2024 undergraduate programs">

                                                <img class="introduction_items_list_item_image" srcset="https://images.fastspot.com/vcuarts/1220x686/1 1220w, https://images.fastspot.com/vcuarts/980x552/1 980w, https://images.fastspot.com/vcuarts/740x416/1 740w, https://images.fastspot.com/vcuarts/500x282/1 500w, https://images.fastspot.com/vcuarts/300x169/1 300w" sizes="(min-width: 980px) 35vw, 22vw" src="https://images.fastspot.com/vcuarts/300x169/1" alt="" loading="lazy" width="300" height="169">
                                            </a>
                                        </figure>
                                    </div>
                                </li>
                                <li class="introduction_updates_items_item">
                                    <p class="introduction_updates_items_item_description">

                                        <a href="#" class="introduction_updates_items_item_description_link">
                                            <span class="introduction_updates_items_item_description_link_inner">
                                                <span class="introduction_updates_items_item_description_link_label">Congratulations to the classes of 2023!</span>
                                            </span>
                                        </a>
                                    </p>
                                    <div class="js-background-video-container introduction_updates_items_item_media">
                                        <figure class="introduction_updates_items_item_figure">
                                            <a href="#" class="introduction_updates_items_item_figure_link" aria-label="Congratulations to the classes of 2023!">

                                                <img class="introduction_items_list_item_image" srcset="https://images.fastspot.com/vcuarts/1220x686/2 1220w, https://images.fastspot.com/vcuarts/980x552/2 980w, https://images.fastspot.com/vcuarts/740x416/2 740w, https://images.fastspot.com/vcuarts/500x282/2 500w, https://images.fastspot.com/vcuarts/300x169/2 300w" sizes="(min-width: 980px) 35vw, 22vw" src="https://images.fastspot.com/vcuarts/300x169/2" alt="" loading="lazy" width="300" height="169">
                                            </a>
                                        </figure>
                                    </div>
                                </li>
                                <li class="introduction_updates_items_item">
                                    <p class="introduction_updates_items_item_description">

                                        <a href="#" class="introduction_updates_items_item_description_link">
                                            <span class="introduction_updates_items_item_description_link_inner">
                                                <span class="introduction_updates_items_item_description_link_label">Fashion Design and Merchandising present Access 2023</span>
                                            </span>
                                        </a>
                                    </p>
                                    <div class="js-background-video-container introduction_updates_items_item_media">
                                        <figure class="introduction_updates_items_item_figure">
                                            <a href="#" class="introduction_updates_items_item_figure_link" aria-label="Fashion Design and Merchandising present Access 2023">

                                                <img class="introduction_items_list_item_image" srcset="https://images.fastspot.com/vcuarts/1220x686/3 1220w, https://images.fastspot.com/vcuarts/980x552/3 980w, https://images.fastspot.com/vcuarts/740x416/3 740w, https://images.fastspot.com/vcuarts/500x282/3 500w, https://images.fastspot.com/vcuarts/300x169/3 300w" sizes="(min-width: 980px) 35vw, 22vw" src="https://images.fastspot.com/vcuarts/300x169/3" alt="" loading="lazy" width="300" height="169">
                                            </a>
                                        </figure>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="introduction_updates_items_footer">
                            <p class="introduction_updates_items_footer_action">

                                <a href="#" class="introduction_updates_items_footer_action_link">
                                    <span class="introduction_updates_items_footer_action_link_inner">
                                        <span class="introduction_updates_items_footer_action_link_label">More News & Events</span><span class="icon_nowrap introduction_updates_items_footer_action_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_arrow_right">
                                                <use href="/images/icons.svg#arrow_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="introduction_statements">
                    <div class="introduction_statements_inner">
                        <div class="introduction_statements_item">
                            <p class="introduction_statements_item_description">In our 16 departments and programs, you'll explore emerging and traditional mediums.</p>
                            <div class="introduction_statements_item_action">&#xfeff;
                                <a href="#" class="introduction_statements_item_action_link">
                                    <span class="introduction_statements_item_action_link_inner">
                                        <span class="introduction_statements_item_action_link_label">Academics</span><span class="icon_nowrap introduction_statements_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 class="introduction_statements_item">
                            <p class="introduction_statements_item_description">You'll collaborate with exceptional faculty and students from across our Richmond, VA campus.</p>
                            <div class="introduction_statements_item_action">&#xfeff;
                                <a href="#" class="introduction_statements_item_action_link">
                                    <span class="introduction_statements_item_action_link_inner">
                                        <span class="introduction_statements_item_action_link_label">Community & Campus</span><span class="icon_nowrap introduction_statements_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 class="introduction_statements_item">
                            <p class="introduction_statements_item_description">And you'll graduate with credibility as an artist and professional, with a nationally-recognized degree.</p>
                            <div class="introduction_statements_item_action">&#xfeff;
                                <a href="#" class="introduction_statements_item_action_link">
                                    <span class="introduction_statements_item_action_link_inner">
                                        <span class="introduction_statements_item_action_link_label">About VCUarts</span><span class="icon_nowrap introduction_statements_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>
<!-- END: Introduction -->
 
{#
	{% include '@component-introduction' with {
		group_cta: {
			label: 'Link Label',
			url: '#'
		},
		items: [
			{
				image: '1',
				alt: '',
				video: {
					type: '',
					id: '',
					title: ''
				},
				description: 'Item Description',
				url: '#'
			}
		],
		statements: [
			{
				description: 'Statement',
				link: {
					label: 'Link Label',
					url: '#'
				}
			}
		]
	} %}
#}

<!-- Introduction -->
<div class="js-introduction introduction">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="introduction_inner">
				<div class="introduction_updates">
					<div class="introduction_updates_items">
						<div class="introduction_updates_items_header">
							<h2 class="introduction_updates_items_title">News & Events</h2>
						</div>
						<div class="introduction_updates_items_body">
							<ul class="introduction_updates_items_list" aria-label="News & Events">
								{% for item in items %}
									<li class="introduction_updates_items_item">
										<p class="introduction_updates_items_item_description">
											{% include '@partial-link' with {
												class: 'introduction_updates_items_item_description',
												title: item.description,
												url: item.url
											} %}
										</p>
										<div class="js-background-video-container introduction_updates_items_item_media">
											{% if item.video %}
												{% set video_options = {
													display: "background",
													id: item.video.id,
													type: item.video.type,
													title: item.video.title,
													autoplay: true
												} %}
												<div class="js-background-video-wrapper introduction_updates_items_item_video" data-background-video='{{ video_options|json_encode }}'>
													<div class="introduction_updates_items_item_video_iframe_wrap">
														<div class="introduction_updates_items_item_video_iframe_target js-iframe-target"></div>
													</div>

													<div class="introduction_updates_items_item_video_controls">
														{% include '@partial-button' with {
															class: 'introduction_updates_items_item_video_play',
															title: 'Play Video',
															icon: 'play',
															js: false,
															js_class: 'js-background-video-play'
														} %}

														{% include "@partial-button" with {
															class: 'introduction_updates_items_item_video_pause',
															title: 'Pause Video',
															icon: 'pause',
															js: false,
															js_class: 'js-background-video-pause'
														} %}
													</div>
												</div>
											{% endif %}
											<figure class="introduction_updates_items_item_figure">
												<a href="{{ item.url }}" class="introduction_updates_items_item_figure_link" aria-label="{{ item.description }}">
													{% include '@partial-image' with {
														class: 'introduction_items_list_item',
														alt: item.alt,
														image: item.image,
														loading: 'lazy',
														sources: [
															img.wide.lrg,
															img.wide.med,
															img.wide.sml,
															img.wide.xsml,
															img.wide.xxsml
														],
														sizes: [
															"(min-width: 980px) 35vw",
															"22vw"
														]
													} %}
												</a>
											</figure>
										</div>
									</li>
								{% endfor %}
							</ul>
						</div>
						<div class="introduction_updates_items_footer">
							<p class="introduction_updates_items_footer_action">
								{% include '@partial-link' with {
									class: 'introduction_updates_items_footer_action',
									title: group_cta.label,
									url: group_cta.url,
									icon: 'arrow_right',
									nowrap: true
								} %}
							</p>
						</div>
					</div>
				</div>
				<div class="introduction_statements">
					<div class="introduction_statements_inner">
						{% for statement in statements %}
							<div class="introduction_statements_item">
								<p class="introduction_statements_item_description">{{ statement.description }}</p><div class="introduction_statements_item_action">&#xfeff;{% include '@partial-link' with { class: 'introduction_statements_item_action', title: statement.link.label, url: statement.link.url, icon: 'arrow_right', nowrap: true } %}</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Introduction -->

No notes defined.