MSMU Component Library

Tours Visual Cta 

<div class="tours_visual_cta theme_blue">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="tours_visual_cta_inner">
                <div class="tours_visual_cta_header">
                    <h2 class="tours_visual_cta_title">Take A Virtual Tour</h2>
                    <span class="tours_visual_cta_description">Our campus locations in Los Angeles provide an ideal setting to meet other students and connect with all The Mount's offerings.</span>
                    <a href="#" class="tours_visual_cta_link">
                        <span class="tours_visual_cta_link_label">Plan a Visit</span>
                        <span class="tours_visual_cta_link_icon">
                            <svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg>
                        </span>
                    </a>
                </div>
                <div class="tours_visual_cta_body">
                    <div class="tours_visual_cta_item">
                        <figure class="tours_visual_cta_item_figure">
                            <a href="#" class="tours_visual_cta_item_figure_link">

                                <img class="tours_visual_cta_item_image" srcset="https://images.fastspot.com/mount-saint-marys-university/740x416/3 740w, https://images.fastspot.com/mount-saint-marys-university/500x282/3 500w, https://images.fastspot.com/mount-saint-marys-university/300x169/3 300w" src="https://images.fastspot.com/mount-saint-marys-university/300x169/3" alt="image for Explore Chalon Campus" loading="lazy" width="300" height="169">
                            </a>
                        </figure>
                        <div class="tours_visual_cta_item_wrapper">

                            <a href="#" class="tours_visual_cta_item_title_link">
                                <span class="tours_visual_cta_item_title_link_inner">
                                    <span class="tours_visual_cta_item_title_link_label">Explore Chalon Campus</span><span class="tours_visual_cta_item_title_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_arrow_right">
                                            <use href="/images/icons.svg#arrow_right" />
                                        </svg>
                                    </span>
                                </span>
                            </a> <span class="tours_visual_cta_item_description">Located in West LA, our campus nestled in the Santa Monica mountains serves undergraduate students with an active residence life community.</span>
                        </div>
                    </div>
                    <div class="tours_visual_cta_item">
                        <figure class="tours_visual_cta_item_figure">
                            <a href="#" class="tours_visual_cta_item_figure_link">

                                <img class="tours_visual_cta_item_image" srcset="https://images.fastspot.com/mount-saint-marys-university/740x416/4 740w, https://images.fastspot.com/mount-saint-marys-university/500x282/4 500w, https://images.fastspot.com/mount-saint-marys-university/300x169/4 300w" src="https://images.fastspot.com/mount-saint-marys-university/300x169/4" alt="image for Explore Doheny Campus" loading="lazy" width="300" height="169">
                            </a>
                        </figure>
                        <div class="tours_visual_cta_item_wrapper">

                            <a href="#" class="tours_visual_cta_item_title_link">
                                <span class="tours_visual_cta_item_title_link_inner">
                                    <span class="tours_visual_cta_item_title_link_label">Explore Doheny Campus</span><span class="tours_visual_cta_item_title_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_arrow_right">
                                            <use href="/images/icons.svg#arrow_right" />
                                        </svg>
                                    </span>
                                </span>
                            </a> <span class="tours_visual_cta_item_description">Our Downtown LA campus houses our graduate programs. Weekend and evening programs also meet at Doheny.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="tours_visual_cta{% if theme %} theme_{{ theme }}{% endif %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="tours_visual_cta_inner">
				<div class="tours_visual_cta_header">
					<h2 class="tours_visual_cta_title">{{ title }}</h2>
					<span class="tours_visual_cta_description">{{ description }}</span>
					{% if link %}
					<a href="{{ link.url }}" class="tours_visual_cta_link"{% if link.aria %} aria-label="{{ link.aria }}"{% endif %}>
						<span class="tours_visual_cta_link_label">{{ link.label }}</span>
						<span class="tours_visual_cta_link_icon">{{ icon("arrow_right") }}</span>
					</a>
					{% endif %}
				</div>
				<div class="tours_visual_cta_body">
					{% for item in items %}
					<div class="tours_visual_cta_item">
						<figure class="tours_visual_cta_item_figure">
							{% if item.link %}
							<a href="{{ item.link }}" class="tours_visual_cta_item_figure_link">
							{% endif %}
							{% include '@partial-image' with {
								class: 'tours_visual_cta_item',
								alt: 'image for ' ~ item.title,
								image: item.image,
								loading: 'lazy',
								sources: [
									img.wide.sml,
									img.wide.xsml,
									img.wide.xxsml
								]
							} %}
							{% if item.link %}
							</a>
							{% endif %}
						</figure>
						<div class="tours_visual_cta_item_wrapper">
							{% include '@partial-link' with {
								title: item.title,
								url: item.link,
								class: 'tours_visual_cta_item_title',
								js: false,
								icon: 'arrow_right',
								nowrap: true
							} %}
							<span class="tours_visual_cta_item_description">{{ item.description }}</span>
						</div>
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.