Johns Hopkins Data Science and AI Institute Component Library

Spotlight Basic 

<div class="js-spotlight spotlight_basic">
    <div class="spotlight_basic_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="spotlight_basic_header_inner">
                    <h1 class="spotlight_basic_title" id="page_header_title">Data Science and AI Institute:</h1>
                    <div class="spotlight_basic_subtitle">
                        The Collaboration of Human & Artificial Intelligence
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="spotlight_basic_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="spotlight_basic_inner">

                    <div class="spotlight_basic_content">
                        <div class="spotlight_basic_statement">

                            <span class="spotlight_basic_statement_end">The Power and Promise of Data Science and AI</span>
                        </div>
                    </div>

                    <div class="spotlight_basic_video">
                        <div class="js-background-video-wrapper page_header_bg_video" data-background-video='{"display":"background","id":"886512527","type":"vimeo","title":"Fastspot Moments","autoplay":true}'>
                            <div class="page_header_bg_video_controls">

                                <button class="page_header_bg_video_play_button js-page-header-bg-video-play-button">
                                    <span class="page_header_bg_video_play_button_inner">
                                        <span class="page_header_bg_video_play_button_label">Play Video</span>
                                        <span class="page_header_bg_video_play_button_icon" aria-hidden="true">

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

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

                                <button class="page_header_bg_video_pause_button js-page-header-bg-video-pause-button">
                                    <span class="page_header_bg_video_pause_button_inner">
                                        <span class="page_header_bg_video_pause_button_label">Pause Video</span>
                                        <span class="page_header_bg_video_pause_button_icon" aria-hidden="true">

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

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

                            <div class="page_header_bg_video_iframe_wrap">
                                <div class="page_header_bg_video_iframe_target js-iframe-target"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="js-spotlight spotlight_basic">
	{% if title or subtitle %}
		<div class="spotlight_basic_header">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="spotlight_basic_header_inner">
						{% if title %}
							<h1 class="spotlight_basic_title" id="page_header_title">{{ title }}</h1>
						{% endif %}
						{% if subtitle %}
							<div class="spotlight_basic_subtitle">
								{{ subtitle }}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="spotlight_basic_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="spotlight_basic_inner">
					{% set video_options = {
						display: "background",
						id: video.id,
						type: video.type,
						title: video.title,
						autoplay: true
					} %}

					<div class="spotlight_basic_content">
						<div class="spotlight_basic_statement">
							{# <span class="spotlight_basic_statement_start">{{ statement_start }}</span>  #}
							<span class="spotlight_basic_statement_end">{{ statement }}</span>
						</div>
					</div>

					<div class="spotlight_basic_video">
						<div class="js-background-video-wrapper page_header_bg_video" data-background-video='{{ video_options|json_encode }}'>
							<div class="page_header_bg_video_controls">
								{% render '@partial-button' with {
									class: 'page_header_bg_video_play',
									title: 'Play Video',
									icon: 'play',
									js: true
								} %}

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

							<div class="page_header_bg_video_iframe_wrap">
								<div class="page_header_bg_video_iframe_target js-iframe-target"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.