Johns Hopkins University Component Library

Spotlight 

<div class="spotlight_block">
    <div class="spotlight_inner">
        <div class="spotlight_header">
            <span class="spotlight_logo">
                <svg class="icon icon_logo_stacked">
                    <use href="/images/icons.svg#logo_stacked" />
                </svg>
            </span>
            <h1 class="spotlight_title">Welcome to Johns Hopkins Facilities & Real Estate</h1>
            <div class="spotlight_media spotlight_media_sm">

                <picture class="spotlight_picture">
                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/framework/980x735/" width="980" height="735">
                    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x555/" width="740" height="555">
                    <img class="spotlight_image" src="//images.fastspot.com/framework/740x740/" alt="" loading="lazy" width="740" height="740">
                </picture>
            </div>
        </div>
        <div class="spotlight_main">
            <div class="spotlight_links">
                <a class="spotlight_link" href="#">
                    <span class="spotlight_link_inner">
                        <span class="spotlight_link_icon">
                            <svg class="icon icon_wrenches">
                                <use href="/images/icons.svg#wrenches" />
                            </svg>
                        </span>
                        <span class="spotlight_link_label">Request a Service</span>
                        <span class="spotlight_link_hint">
                            <svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg>
                        </span>
                    </span>
                </a>
                <a class="spotlight_link" href="#">
                    <span class="spotlight_link_inner">
                        <span class="spotlight_link_icon">
                            <svg class="icon icon_parking_mini">
                                <use href="/images/icons.svg#parking_mini" />
                            </svg>
                        </span>
                        <span class="spotlight_link_label">Pay for Parking or Citation</span>
                        <span class="spotlight_link_hint">
                            <svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg>
                        </span>
                    </span>
                </a>
                <a class="spotlight_link" href="#">
                    <span class="spotlight_link_inner">
                        <span class="spotlight_link_icon">
                            <svg class="icon icon_shuttle">
                                <use href="/images/icons.svg#shuttle" />
                            </svg>
                        </span>
                        <span class="spotlight_link_label">Real-Time Shuttle (Transloc)</span>
                        <span class="spotlight_link_hint">
                            <svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
            <div class="spotlight_media spotlight_media_lg">

                <picture class="spotlight_picture">
                    <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x523/" width="1220" height="523">
                    <source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/980x552/" width="980" height="552">
                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/framework/740x416/" width="740" height="416">
                    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/500x282/" width="500" height="282">
                    <img class="spotlight_image" src="//images.fastspot.com/framework/300x169/" alt="" loading="lazy" width="300" height="169">
                </picture>
            </div>
        </div>
    </div>
</div>
 
<div class="spotlight_block">
	<div class="spotlight_inner">
		<div class="spotlight_header">
			<span class="spotlight_logo">{{ icon('logo_stacked') }}</span>
			<h1 class="spotlight_title">{{ title }}</h1>
			<div class="spotlight_media spotlight_media_sm">
				{% include '@partial-picture' with {
					class: 'spotlight',
					alt: '',
					image: item.image,
					loading: 'lazy',
					default: img.square.sml,
					sources: {
						'740px': img.full.med,
						'500px': img.full.sml
					}
				} %}
			</div>
		</div>
		<div class="spotlight_main">
			<div class="spotlight_links">
				{% for item in items %}
					<a class="spotlight_link" href="{{ item.url }}">
						<span class="spotlight_link_inner">
							<span class="spotlight_link_icon">{{ icon(item.icon) }}</span>
							<span class="spotlight_link_label">{{ item.title }}</span>
							<span class="spotlight_link_hint">{{ icon('arrow_right') }}</span>
						</span>
					</a>
				{% endfor %}
			</div>
			<div class="spotlight_media spotlight_media_lg">
				{% include '@partial-picture' with {
					class: 'spotlight',
					alt: '',
					image: item.image,
					loading: 'lazy',
					default: img.wide.xxsml,
					sources: {
						'1220px': img.ultrawide.lrg,
						'980px': img.wide.med,
						'740px': img.wide.sml,
						'500px': img.wide.xsml
					}
				} %}
			</div>
		</div>
	</div>
</div>

No notes defined.