St. George's University Component Library

Page Header: Home 

<div class="hero">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="hero_inner">
                <div class="hero_header">
                    <h1 class="hero_title" id="page_title" tabindex="-1"></h1>
                    <p class="hero_description"></p>
                </div>
                <div class="hero_body">
                    <figure class="hero_figure">

                        <img class="hero_figure_image" srcset="https://images.fastspot.com/generic/1440x810/ 1440w, https://images.fastspot.com/generic/1220x686/ 1220w, https://images.fastspot.com/generic/980x552/ 980w, https://images.fastspot.com/generic/740x416/ 740w, https://images.fastspot.com/generic/500x282/ 500w, https://images.fastspot.com/generic/300x169/ 300w" sizes="(min-width: 1394px) 1260px, (min-width: 1220px) 1100px, (min-width: 980px) 880px, (min-width: 740px) 694px, (min-width: 500px) 48vw, 90vw" src="https://images.fastspot.com/generic/300x169/" alt="" loading="eager" width="300" height="169">
                        <div class="js-background-video-wrapper hero_video" data-background-video='{"display":"background","id":null,"type":null,"title":null,"autoplay":true}'>
                            <div class="hero_video_iframe_wrap">
                                <div class="hero_video_iframe_target js-iframe-target"></div>
                            </div>

                            <div class="hero_video_controls">

                                <button class="hero_video_play_button js-hero-video-play-button">
                                    <span class="hero_video_play_button_inner">
                                        <span class="hero_video_play_button_label">Play Video</span>
                                        <span class="hero_video_play_button_icon" aria-hidden="true">

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

                                        </span>
                                    </span>
                                </button>

                                <button class="hero_video_pause_button js-hero-video-pause-button">
                                    <span class="hero_video_pause_button_inner">
                                        <span class="hero_video_pause_button_label">Pause Video</span>
                                        <span class="hero_video_pause_button_icon" aria-hidden="true">

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

                                        </span>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </figure>
                    <div class="hero_decoration"></div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="hero">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="hero_inner">
				<div class="hero_header">
					<h1 class="hero_title" id="page_title" tabindex="-1">{{ page.title }}</h1>
					<p class="hero_description">{{ page.description }}</p>
				</div>
				<div class="hero_body">
					<figure class="hero_figure">
						{% include '@partial-image' with {
							class: 'hero_figure',
							alt: '',
							image: page.hero_image,
							loading: 'eager',
							sources: [
								img.wide.xlrg,
								img.wide.lrg,
								img.wide.med,
								img.wide.sml,
								img.wide.xsml,
								img.wide.xxsml
							],
							sizes: [
								'(min-width: 1394px) 1260px',
								'(min-width: 1220px) 1100px',
								'(min-width: 980px) 880px',
								'(min-width: 740px) 694px',
								'(min-width: 500px) 48vw',
								'90vw'
							]
						} %}
						{% set video_options = {
							display: "background",
							id: page.hero_video.id,
							type: page.hero_video.type,
							title: page.hero_video.title,
							autoplay: true
						} %}
						<div class="js-background-video-wrapper hero_video" data-background-video='{{ video_options|json_encode }}'>
							<div class="hero_video_iframe_wrap">
								<div class="hero_video_iframe_target js-iframe-target"></div>
							</div>

							<div class="hero_video_controls">
								{% render '@partial-button' with {
									class: 'hero_video_play',
									title: 'Play Video',
									icon: 'play',
									js: true
								} %}

								{% render "@partial-button" with {
									class: 'hero_video_pause',
									title: 'Pause Video',
									icon: 'pause',
									js: true
								} %}
							</div>
						</div>
					</figure>
					<div class="hero_decoration"></div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.