VCUarts Component Library

Call To Action 

<!-- Call to Action -->
<div class="cta cta_theme_white" data-sticky-sidebar-color="dark">
    <div class="cta_intro">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="cta_intro_inner">
                    <div class="cta_header">
                        <div class="cta_title">
                            <h2 class="cta_title_primary">Find campus and community happenings, opportunities to share your work, upcoming deadlines, and department information.</h2>
                            <p class="cta_title_secondary">Ipsum Consectetur Pharetra Purus</p>
                        </div>
                    </div>
                    <div class="cta_body">
                        <div class="cta_description">
                            <p>VCU and the School of the Arts value and celebrate diversity in all of its forms. We support thoughtful, informed and inclusive action, and are committed to empowering community values in which individuals of different perspectives, life experiences, cultural backgrounds, and social identities feel safe and welcomed.</p>
                        </div>
                        <div class="cta_action">

                            <a href="#" class="cta_link">
                                <span class="cta_link_inner">
                                    <span class="cta_link_label">Diversity, Equity and Inclusion at VCUarts</span><span class="icon_nowrap cta_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>
<!-- END: Call to Action -->
 
{#
	{% include '@component-call-to-action' with {
		page_nav_id: '',
		theme: 'color',
		title: 'Title Primary',
		secondary_title: 'Title Secondary',
		description: 'Description',
		image: '1',
		alt: '',
		background: false,
		link: {
			url: '#',
			label: 'label',
			aria: 'aria'
		}
	} %}
#}

{% set sidebar_color = {
	white: 'dark',
	green: 'dark',
	green_pale: 'dark',
	blue: 'light',
	blue_pale: 'dark',
	yellow: 'dark',
	yellow_pale: 'dark',
	pink: 'dark',
	red: 'dark',
	black: 'light',
} %}

<!-- Call to Action -->
<div class="{% if page_nav_id %}js-page-nav-component {% endif %}cta{% if background == false %} cta_theme_{{ theme }}{% endif %}{% if image %} cta_has_image{% endif %}{% if image and background == true %} cta_image_background{% endif %}{% if image and background == false %} cta_image_inline{% endif %}"{% if page_nav_id %} id="{{ page_nav_id }}"{% endif %} data-sticky-sidebar-color="{{ image and background == true ? 'light' : sidebar_color[theme] }}">
	{% if image and background == true %}
		<div class="cta_background">
			<figure class="cta_background_figure" aria-hidden="true">
				{% include '@partial-image' with {
					class: 'cta_background',
					alt: alt,
					image: image,
					loading: 'lazy',
					sources: [
						img.wide.xlrg,
						img.wide.lrg,
						img.wide.med,
						img.wide.sml,
						img.wide.xsml,
						img.wide.xxsml
					],
					sizes: [
						"100vw"
					]
				} %}
			</figure>
		</div>
	{% endif %}
	<div class="cta_intro">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="cta_intro_inner">
					<div class="cta_header">
						<div class="cta_title">
							<h2 class="cta_title_primary">{{ title }}</h2>
							{% if secondary_title %}
								<p class="cta_title_secondary">{{ secondary_title }}</p>
							{% endif %}
						</div>
					</div>
					<div class="cta_body">
						{% if description %}
							<div class="cta_description">{{ description }}</div>
						{% endif %}
						<div class="cta_action">
							{% include '@partial-link' with {
								class: 'cta',
								title: link.label,
								url: link.url,
								icon: 'arrow_right',
								aria: link.aria,
								nowrap: true
							} %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	{% if image and background == false %}
		<div class="cta_media">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="cta_media_inner">
						<figure class="cta_figure">
							{% include '@partial-image' with {
								class: 'cta',
								alt: alt,
								image: image,
								loading: 'lazy',
								sources: [
									img.ultrawide.lrg,
									img.ultrawide.med,
									img.ultrawide.sml,
									img.ultrawide.xsml,
									img.ultrawide.xxsml
								],
								sizes: [
									"(min-width: 980px) 76vw",
									"100vw"
								]
							} %}
						</figure>
					</div>
				</div>
			</div>
		</div>
	{% endif %}
</div>
<!-- END: Call to Action -->

No notes defined.