VCUarts Component Library

Inspirations 

<!-- Inspirations -->
<div class="inspirations">
    <div class="inspirations_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="inspirations_header_inner">
                    <h2 class="inspirations_title">What Inspires You?</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="inspirations_body">
        <div class="inspirations_intro">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="inspirations_intro_inner">
                        <div class="inspirations_intro_header">
                            <h3 class="inspirations_intro_title"><span class="inspirations_intro_title_label">Let inspiration lead the charge &ndash; </span><span class="inspirations_intro_title_sub">and form follow</span></h3>
                        </div>
                        <div class="inspirations_intro_body">
                            <div class="inspirations_intro_description">
                                <p>Creativity doesn't fit in a box. At VCUarts, you'll flex your creative muscles across disciplines, exploring your interests inside and outside of the classroom.</p>
                                <p>See what inspires our community to create.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="inspirations_carousel_wrapper">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="inspirations_carousel_inner">
                        <div class="js-carousel inspirations_carousel" data-carousel-options='{"contained": false, "controls": true, "pagination": true, "show": {"630px": 2}}'>
                            <div class="inspirations_carousel_item">
                                <a class="inspirations_carousel_item_link" href="#">
                                    <figure class="inspirations_carousel_item_figure" aria-hidden="true">

                                        <img class="inspirations_carousel_item_image" srcset="https://images.fastspot.com/vcuarts/555x740/1 555w, https://images.fastspot.com/vcuarts/375x500/1 375w, https://images.fastspot.com/vcuarts/225x300/1 225w" sizes="280px" src="https://images.fastspot.com/vcuarts/225x300/1" alt="" loading="lazy" width="225" height="300">
                                    </figure>
                                    <div class="inspirations_carousel_item_group">
                                        <p class="inspirations_carousel_item_title">Technology</p>
                                        <p class="inspirations_carousel_item_label">
                                            <span class="inspirations_carousel_item_label_inner">Explore Inspirations</span>
                                        </p>
                                    </div>
                                </a>
                            </div>
                            <div class="inspirations_carousel_item">
                                <a class="inspirations_carousel_item_link" href="#">
                                    <figure class="inspirations_carousel_item_figure" aria-hidden="true">

                                        <img class="inspirations_carousel_item_image" srcset="https://images.fastspot.com/vcuarts/555x740/2 555w, https://images.fastspot.com/vcuarts/375x500/2 375w, https://images.fastspot.com/vcuarts/225x300/2 225w" sizes="280px" src="https://images.fastspot.com/vcuarts/225x300/2" alt="" loading="lazy" width="225" height="300">
                                    </figure>
                                    <div class="inspirations_carousel_item_group">
                                        <p class="inspirations_carousel_item_title">Civic Action</p>
                                        <p class="inspirations_carousel_item_label">
                                            <span class="inspirations_carousel_item_label_inner">Explore Inspirations</span>
                                        </p>
                                    </div>
                                </a>
                            </div>
                            <div class="inspirations_carousel_item">
                                <a class="inspirations_carousel_item_link" href="#">
                                    <figure class="inspirations_carousel_item_figure" aria-hidden="true">

                                        <img class="inspirations_carousel_item_image" srcset="https://images.fastspot.com/vcuarts/555x740/3 555w, https://images.fastspot.com/vcuarts/375x500/3 375w, https://images.fastspot.com/vcuarts/225x300/3 225w" sizes="280px" src="https://images.fastspot.com/vcuarts/225x300/3" alt="" loading="lazy" width="225" height="300">
                                    </figure>
                                    <div class="inspirations_carousel_item_group">
                                        <p class="inspirations_carousel_item_title">Health & Wellness</p>
                                        <p class="inspirations_carousel_item_label">
                                            <span class="inspirations_carousel_item_label_inner">Explore Inspirations</span>
                                        </p>
                                    </div>
                                </a>
                            </div>
                            <div class="inspirations_carousel_item">
                                <a class="inspirations_carousel_item_link" href="#">
                                    <figure class="inspirations_carousel_item_figure" aria-hidden="true">

                                        <img class="inspirations_carousel_item_image" srcset="https://images.fastspot.com/vcuarts/555x740/4 555w, https://images.fastspot.com/vcuarts/375x500/4 375w, https://images.fastspot.com/vcuarts/225x300/4 225w" sizes="280px" src="https://images.fastspot.com/vcuarts/225x300/4" alt="" loading="lazy" width="225" height="300">
                                    </figure>
                                    <div class="inspirations_carousel_item_group">
                                        <p class="inspirations_carousel_item_title">Sustainability</p>
                                        <p class="inspirations_carousel_item_label">
                                            <span class="inspirations_carousel_item_label_inner">Explore Inspirations</span>
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="inspirations_list" aria-label="What Inspires You?">
            <li class="js-inspirations-item inspirations_item">
                <a class="inspirations_item_link" href="#">
                    <figure class="inspirations_item_figure" aria-hidden="true">

                        <img class="inspirations_item_image" srcset="https://images.fastspot.com/vcuarts/1440x617/1 1440w, https://images.fastspot.com/vcuarts/1220x523/1 1220w, https://images.fastspot.com/vcuarts/980x420/1 980w, https://images.fastspot.com/vcuarts/740x317/1 740w, https://images.fastspot.com/vcuarts/500x214/1 500w, https://images.fastspot.com/vcuarts/300x129/1 300w" sizes="(min-width: 980px) 100vw, 0" src="https://images.fastspot.com/vcuarts/300x129/1" alt="" loading="lazy" width="300" height="129">
                    </figure>
                    <div class="inspirations_item_group">
                        <p class="inspirations_item_title">Technology</p>
                        <p class="js-inspirations-item-label inspirations_item_label">
                            <span class="inspirations_item_label_inner">Explore Technology Inspirations</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="js-inspirations-item inspirations_item">
                <a class="inspirations_item_link" href="#">
                    <figure class="inspirations_item_figure" aria-hidden="true">

                        <img class="inspirations_item_image" srcset="https://images.fastspot.com/vcuarts/1440x617/2 1440w, https://images.fastspot.com/vcuarts/1220x523/2 1220w, https://images.fastspot.com/vcuarts/980x420/2 980w, https://images.fastspot.com/vcuarts/740x317/2 740w, https://images.fastspot.com/vcuarts/500x214/2 500w, https://images.fastspot.com/vcuarts/300x129/2 300w" sizes="(min-width: 980px) 100vw, 0" src="https://images.fastspot.com/vcuarts/300x129/2" alt="" loading="lazy" width="300" height="129">
                    </figure>
                    <div class="inspirations_item_group">
                        <p class="inspirations_item_title">Civic Action</p>
                        <p class="js-inspirations-item-label inspirations_item_label">
                            <span class="inspirations_item_label_inner">Explore Civic Action Inspirations</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="js-inspirations-item inspirations_item">
                <a class="inspirations_item_link" href="#">
                    <figure class="inspirations_item_figure" aria-hidden="true">

                        <img class="inspirations_item_image" srcset="https://images.fastspot.com/vcuarts/1440x617/3 1440w, https://images.fastspot.com/vcuarts/1220x523/3 1220w, https://images.fastspot.com/vcuarts/980x420/3 980w, https://images.fastspot.com/vcuarts/740x317/3 740w, https://images.fastspot.com/vcuarts/500x214/3 500w, https://images.fastspot.com/vcuarts/300x129/3 300w" sizes="(min-width: 980px) 100vw, 0" src="https://images.fastspot.com/vcuarts/300x129/3" alt="" loading="lazy" width="300" height="129">
                    </figure>
                    <div class="inspirations_item_group">
                        <p class="inspirations_item_title">Health & Wellness</p>
                        <p class="js-inspirations-item-label inspirations_item_label">
                            <span class="inspirations_item_label_inner">Explore Health & Wellness Inspirations</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="js-inspirations-item inspirations_item">
                <a class="inspirations_item_link" href="#">
                    <figure class="inspirations_item_figure" aria-hidden="true">

                        <img class="inspirations_item_image" srcset="https://images.fastspot.com/vcuarts/1440x617/4 1440w, https://images.fastspot.com/vcuarts/1220x523/4 1220w, https://images.fastspot.com/vcuarts/980x420/4 980w, https://images.fastspot.com/vcuarts/740x317/4 740w, https://images.fastspot.com/vcuarts/500x214/4 500w, https://images.fastspot.com/vcuarts/300x129/4 300w" sizes="(min-width: 980px) 100vw, 0" src="https://images.fastspot.com/vcuarts/300x129/4" alt="" loading="lazy" width="300" height="129">
                    </figure>
                    <div class="inspirations_item_group">
                        <p class="inspirations_item_title">Sustainability</p>
                        <p class="js-inspirations-item-label inspirations_item_label">
                            <span class="inspirations_item_label_inner">Explore Sustainability Inspirations</span>
                        </p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- END: Inspirations -->
 
{#
	{% include '@component-inspirations' with {
		group_label: 'Group Label',
		group_title: 'Group Title',
		group_subtitle: 'Group Subtitle',
		group_description:"<p>Group Description</p>",
		items: [
			{
				title: 'Item Title',
				image: '1',
				alt: '',
				url: '#'
			}
		]
	} %}
#}

<!-- Inspirations -->
<div class="inspirations">
	{% if group_label %}
		<div class="inspirations_header">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="inspirations_header_inner">
						<h2 class="inspirations_title">{{ group_label }}</h2>
					</div>
				</div>
			</div>
		</div>
	{% else %}
		<div class="inspirations_header_spacer"></div
	{% endif %}
	<div class="inspirations_body">
		<div class="inspirations_intro">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="inspirations_intro_inner">
						<div class="inspirations_intro_header">
							<h3 class="inspirations_intro_title"><span class="inspirations_intro_title_label">{{ group_title }}</span>{% if group_subtitle %}<span class="inspirations_intro_title_sub">{{ group_subtitle }}</span>{% endif %}</h3>
						</div>
						<div class="inspirations_intro_body">
							<div class="inspirations_intro_description">{{ group_description }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="inspirations_carousel_wrapper">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="inspirations_carousel_inner">
						<div class="js-carousel inspirations_carousel" data-carousel-options='{"contained": false, "controls": true, "pagination": true, "show": {"630px": 2}}'>
							{% for item in items %}
								<div class="inspirations_carousel_item">
									<a class="inspirations_carousel_item_link" href="{{ item.url }}">
										<figure class="inspirations_carousel_item_figure" aria-hidden="true">
											{% include '@partial-image' with {
												class: 'inspirations_carousel_item',
												alt: item.alt,
												image: item.image,
												loading: 'lazy',
												sources: [
													img.portraitFull.sml,
													img.portraitFull.xsml,
													img.portraitFull.xxsml
												],
												sizes: [
													"280px"
												]
											} %}
										</figure>
										<div class="inspirations_carousel_item_group">
											<p class="inspirations_carousel_item_title">{{ item.title }}</p>
											<p class="inspirations_carousel_item_label">
												<span class="inspirations_carousel_item_label_inner">Explore Inspirations</span>
											</p>
										</div>
									</a>
								</div>
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
		<ul class="inspirations_list" aria-label="{{ group_label }}">
			{% for item in items %}
				<li class="js-inspirations-item inspirations_item">
					<a class="inspirations_item_link" href="{{ item.url }}">
						<figure class="inspirations_item_figure" aria-hidden="true">
							{% include '@partial-image' with {
								class: 'inspirations_item',
								alt: '',
								image: item.image,
								loading: 'lazy',
								sources: [
									img.ultrawide.xlrg,
									img.ultrawide.lrg,
									img.ultrawide.med,
									img.ultrawide.sml,
									img.ultrawide.xsml,
									img.ultrawide.xxsml
								],
								sizes: [
									"(min-width: 980px) 100vw",
									"0"
								]
							} %}
						</figure>
						<div class="inspirations_item_group">
							<p class="inspirations_item_title">{{ item.title }}</p>
							<p class="js-inspirations-item-label inspirations_item_label">
								<span class="inspirations_item_label_inner">Explore {{ item.title }} Inspirations</span>
							</p>
						</div>
					</a>
				</li>
			{% endfor %}
		</ul>
	</div>
</div>
<!-- END: Inspirations -->

No notes defined.