VCUarts Component Library

Call To Action: Blue 

<!-- Call to Action -->
<div class="cta cta_theme_blue" data-sticky-sidebar-color="light">
    <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_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.