MSMU Component Library

Home Stats 

<div class="home_stats">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="home_stats_inner">
                <div class="home_stats_figure">

                    <picture class="home_stats_picture">
                        <source media="(min-width: 980px)" srcset="https://images.fastspot.com/mount-saint-marys-university/735x980/4">
                        <source media="(min-width: 740px)" srcset="https://images.fastspot.com/mount-saint-marys-university/980x654/4">
                        <source media="(min-width: 500px)" srcset="https://images.fastspot.com/mount-saint-marys-university/740x494/4">
                        <img class="home_stats_image" src="//images.fastspot.com/mount-saint-marys-university/500x334/4" alt="" loading="lazy" width="500px" height="334px">
                    </picture>
                </div>
                <div class="home_stats_body">
                    <div class="home_stats_header">
                        <h2 class="home_stats_title">Get To Know MSMU</h2>
                        <span class="home_stats_intro">Mount Saint Mary’s University is the only women’s university in Los Angeles and one of the most diverse in the nation.</span>
                    </div>
                    <div class="home_stats_list">
                        <div class="home_stats_list_item js-checkpoint" data-checkpoint-offset="300" data-checkpoint-intersect="bottom-top" data-checkpoint-options='{"reverse": true}'>
                            <span class="home_stats_list_item_stat">$26,000</span>
                            <span class="home_stats_list_item_title">Average Student Aid</span>
                            <span class="home_stats_list_item_description">The Mount's goal is to provide <a href="#">financial assistance</a> to all students. Our goal is to help students leave The Mount with a manageable amount of debt.</span>
                        </div>
                        <div class="home_stats_list_item js-checkpoint" data-checkpoint-offset="300" data-checkpoint-intersect="bottom-top" data-checkpoint-options='{"reverse": true}'>
                            <span class="home_stats_list_item_stat">#2</span>
                            <span class="home_stats_list_item_title">Student Social Mobility</span>
                            <span class="home_stats_list_item_description"><a href="#">The US News and World Report</a> recognizes The Mount for supporting students from households with family incomes of less than $50,000 a year.</span>
                        </div>
                        <div class="home_stats_list_item js-checkpoint" data-checkpoint-offset="300" data-checkpoint-intersect="bottom-top" data-checkpoint-options='{"reverse": true}'>
                            <span class="home_stats_list_item_stat">#3</span>
                            <span class="home_stats_list_item_title">Most Transformative Colleges</span>
                            <span class="home_stats_list_item_description"><a href="#">Money Magazine</a> ranked The Mount as a top universitiy that significantly changes the life trajectory and earnings for students who graduate.</span>
                        </div>
                        <div class="home_stats_list_item js-checkpoint" data-checkpoint-offset="300" data-checkpoint-intersect="bottom-top" data-checkpoint-options='{"reverse": true}'>
                            <span class="home_stats_list_item_stat">59%</span>
                            <span class="home_stats_list_item_title">Attend a Graduate Program</span>
                            <span class="home_stats_list_item_description">Money Magazine ranked The Mount as a top universitiy that significantly changes the life trajectory and earnings for students who graduate.</span>
                        </div>
                    </div>

                    <a href="#" class="home_stats_link">
                        <span class="home_stats_link_inner">
                            <span class="home_stats_link_label">Meet the Mount</span><span class="home_stats_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>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="home_stats">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="home_stats_inner">
				<div class="home_stats_figure">
					{% include '@partial-picture' with {
						class: 'home_stats',
						image: image,
						alt: '',
						loading: 'lazy',
						default: img.classic.xsml,
						sources: {
							'980px': img.portraitFull.med,
							'740px': img.classic.med,
							'500px': img.classic.sml
						}
					} %}
				</div>
				<div class="home_stats_body">
					<div class="home_stats_header">
						<h2 class="home_stats_title">{{ title }}</h2>
						<span class="home_stats_intro">{{ intro }}</span>
					</div>
					<div class="home_stats_list">
						{% for item in items %}
						<div class="home_stats_list_item js-checkpoint" data-checkpoint-offset="300" data-checkpoint-intersect="bottom-top" data-checkpoint-options='{"reverse": true}'>
							<span class="home_stats_list_item_stat">{{ item.stat }}</span>
							<span class="home_stats_list_item_title">{{ item.context }}</span>
							<span class="home_stats_list_item_description">{{ item.description }}</span>
						</div>
						{% endfor %}
					</div>
					{% if link %}
					{% include '@partial-link' with {
						title: link.label,
						url: link.url,
						class: 'home_stats',
						js: false,
						icon: 'arrow_right',
						aria: '',
						nowrap: true
					} %}
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.