Johns Hopkins Data Science and AI Institute Component Library

Spotlight 

<div class="js-spotlight spotlight">
    <div class="spotlight_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="spotlight_header_inner">
                    <h1 class="spotlight_title" id="page_header_title">Data Science and AI Institute:</h1>
                    <div class="spotlight_subtitle">
                        The Collaboration of Human & Artificial Intelligence
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="spotlight_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="spotlight_inner">

                    <div class="spotlight_content">
                        <div class="spotlight_tracker">
                            AI–
                        </div>

                        <div class="spotlight_items_wrapper">
                            <ul class="spotlight_items">
                                <li class="spotlight_item">
                                    Pathology
                                </li>
                                <li class="spotlight_item">
                                    Materials
                                </li>
                                <li class="spotlight_item">
                                    Oncology
                                </li>
                                <li class="spotlight_item">
                                    Energy
                                </li>
                                <li class="spotlight_item">
                                    Epidemiology
                                </li>
                                <li class="spotlight_item">
                                    Physics
                                </li>
                                <li class="spotlight_item">
                                    Cognitive Science
                                </li>
                                <li class="spotlight_item">
                                    Space
                                </li>
                                <li class="spotlight_item">
                                    Pikmin
                                </li>
                                <li class="spotlight_item">
                                    Pikachu
                                </li>
                                <li class="spotlight_item">
                                    Kaiju
                                </li>
                                <li class="spotlight_item">
                                    Oatchi
                                </li>
                            </ul>

                            <div class="spotlight_items_icon">

                                <svg class="icon icon_x">
                                    <use href="/images/icons.svg#x" />
                                </svg>

                            </div>
                        </div>
                    </div>

                    <div class="spotlight_video">
                        <div class="js-background-video-wrapper page_header_bg_video" data-background-video='{"display":"background","id":"76979871","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">
	{% if title or subtitle %}
		<div class="spotlight_header">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="spotlight_header_inner">
						{% if title %}
							<h1 class="spotlight_title" id="page_header_title">{{ title }}</h1>
						{% endif %}
						{% if subtitle %}
							<div class="spotlight_subtitle">
								{{ subtitle }}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="spotlight_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="spotlight_inner">
					{% set video_options = {
						display: "background",
						id: video.id,
						type: video.type,
						title: video.title,
						autoplay: true
					} %}

					<div class="spotlight_content">
						<div class="spotlight_tracker">
							{{ tracker }}
						</div>

						<div class="spotlight_items_wrapper">
							<ul class="spotlight_items">
								{% for item in items %}
									<li class="spotlight_item">
										{{ item }}
									</li>
								{% endfor %}
							</ul>

							<div class="spotlight_items_icon">
								{{ icon('x') }}
							</div>
						</div>
					</div>

					<div class="spotlight_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.