MSMU Component Library

Visual Cta 

<div class="visual_cta theme_purple">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="visual_cta_inner">
                <figure class="visual_cta_figure">

                    <img class="visual_cta_image" srcset="https://images.fastspot.com/mount-saint-marys-university/980x654/ 980w, https://images.fastspot.com/mount-saint-marys-university/740x494/ 740w, https://images.fastspot.com/mount-saint-marys-university/500x334/ 500w, https://images.fastspot.com/mount-saint-marys-university/300x200/ 300w" src="https://images.fastspot.com/mount-saint-marys-university/300x200/" alt="" loading="lazy" width="300" height="200">
                </figure>
                <div class="visual_cta_wrapper">
                    <div class="visual_cta_header">
                        <h2 class="visual_cta_title">Our admissions counselors take a personalized approach to the application process.</h2>
                        <span class="visual_cta_heading">Questions</span>
                    </div>
                    <div class="visual_cta_body">
                        <span class="visual_cta_description">You aren’t alone. Contact us at your convenience to get more information about applying to The Mount.</span>
                        <a href="#" class="visual_cta_link">
                            <span class="visual_cta_link_label">Meet the Mount</span>
                            <span class="visual_cta_link_icon">
                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="visual_cta{% if theme %} theme_{{ theme }}{% endif %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="visual_cta_inner">
				<figure class="visual_cta_figure">
					{% include '@partial-image' with {
						class: 'visual_cta',
						alt: '',
						image: item.image,
						loading: 'lazy',
						sources: [
							img.classic.med,
							img.classic.sml,
							img.classic.xsml,
							img.classic.xxsml
						]
					} %}
				</figure>
				<div class="visual_cta_wrapper">
					<div class="visual_cta_header">
						<h2 class="visual_cta_title">{{ title }}</h2>
						<span class="visual_cta_heading">{{ heading }}</span>
					</div>
					<div class="visual_cta_body">
						{% if description %}
						<span class="visual_cta_description">{{ description }}</span>
						{% endif %}
						{% if link %}
						<a href="{{ link.url }}" class="visual_cta_link"{% if link.aria %} aria-label="{{ link.aria }}"{% endif %}>
							<span class="visual_cta_link_label">{{ link.label }}</span>
							<span class="visual_cta_link_icon">{{ icon("arrow_right") }}</span>
						</a>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.