MSMU Component Library

Home Feature 

<div class="home_feature">
    <div class="home_feature_media">
        <figure class="home_feature_figure">

            <picture class="home_feature_picture">
                <source media="(min-width: 1394px)" srcset="https://images.fastspot.com/mount-saint-marys-university/1440x810/3">
                <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/mount-saint-marys-university/1440x960/3">
                <source media="(min-width: 980px)" srcset="https://images.fastspot.com/mount-saint-marys-university/1220x915/3">
                <source media="(min-width: 740px)" srcset="https://images.fastspot.com/mount-saint-marys-university/980x735/3">
                <source media="(min-width: 500px)" srcset="https://images.fastspot.com/mount-saint-marys-university/740x740/3">
                <img class="home_feature_image" src="//images.fastspot.com/mount-saint-marys-university/375x500/3" alt="" loading="eager" width="375px" height="500px">
            </picture>
        </figure>
        <div class="home_feature_video js-background-video-wrapper" data-background-video='{"display":"background","id":"315524095","type":"vimeo","title":"Become <br/>Unstoppable"}'>
            <div class="home_feature_video_iframe_wrap">
                <div class="home_feature_video_iframe_target js-iframe-target"></div>
            </div>
            <div class="home_feature_video_controls">

                <button class="home_feature_video_play_button js-bg-video-play-button">
                    <span class="home_feature_video_play_button_inner">
                        <span class="home_feature_video_play_button_label">Play Video</span>
                        <span class="home_feature_video_play_button_icon" aria-hidden="true"><span class="home_feature_video_play_button_icon_inner">

                                <svg class="icon icon_play">
                                    <use href="/images/icons.svg#play" />
                                </svg>

                            </span>
                        </span>
                </button>
                <button class="home_feature_video_pause_button js-bg-video-pause-button">
                    <span class="home_feature_video_pause_button_inner">
                        <span class="home_feature_video_pause_button_label">Pause Video</span>
                        <span class="home_feature_video_pause_button_icon" aria-hidden="true"><span class="home_feature_video_pause_button_icon_inner">

                                <svg class="icon icon_pause">
                                    <use href="/images/icons.svg#pause" />
                                </svg>

                            </span>
                        </span>
                </button>
            </div>
        </div>
    </div>
    <div class="home_feature_content">
        <div class="fs-row home_feature_content_row">
            <div class="fs-cell">
                <div class="home_feature_content_inner">
                    <h1 id="page_title" class="home_feature_title">Become <br />Unstoppable</h1>
                    <span class="home_feature_description">Our students are extraordinary. They rise above everyday challenges to explore, learn and grow.</span>

                    <a href="#" class="home_feature_link">
                        <span class="home_feature_link_inner">
                            <span class="home_feature_link_label">Learn About Applying</span><span class="home_feature_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_feature">
	<div class="home_feature_media">
		<figure class="home_feature_figure">
			{% include '@partial-picture' with {
				class: 'home_feature',
				image: image,
				alt: '',
				loading: 'eager',
				default: img.portraitFull.xsml,
				sources: {
					'1394px': img.wide.xlrg,
					'1200px': img.classic.xlrg,
					'980px': img.full.lrg,
					'740px': img.full.med,
					'500px': img.square.sml,
				}
			} %}
		</figure>
		{% if video %}
		{% set video_options = {
			display: "background",
			id: video,
			type: "vimeo",
			title: title
		} %}
		<div class="home_feature_video js-background-video-wrapper" data-background-video='{{ video_options|json_encode }}'>
			<div class="home_feature_video_iframe_wrap">
				<div class="home_feature_video_iframe_target js-iframe-target"></div>
			</div>
			<div class="home_feature_video_controls">
				{% render '@partial-button' with {
					class: 'home_feature_video_play',
					title: 'Play Video',
					icon: 'play',
					js: 'bg-video-play'
				} %}
				{% render "@partial-button" with {
					class: 'home_feature_video_pause',
					title: 'Pause Video',
					icon: 'pause',
					js: 'bg-video-pause'
				} %}
			</div>
		</div>
		{% endif %}
	</div>
	<div class="home_feature_content">
		<div class="fs-row home_feature_content_row">
			<div class="fs-cell">
				<div class="home_feature_content_inner">
					<h1 id="page_title" class="home_feature_title">{{ title }}</h1>
					<span class="home_feature_description">{{ description }}</span>
					{% if link %}
					{% include '@partial-link' with {
						title: link.label,
						url: link.url,
						class: 'home_feature',
						js: false,
						icon: 'arrow_right',
						aria: '',
						nowrap: true
					} %}
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.