Header: Landing

300 × 150
<!-- Header -->
<noscript>
    <iframe src="//www.googletagmanager.com/ns.html?id=GTM-K6P58WP" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

<header class="js-header header header_landing" id="header">
    <div class="js-alert-wrapper">
    </div>

    <div class="header_small">

        <div class="header_logo_small">
            <div class="logo logo_header_small logo_icon">
                <a class="logo_link" href="#">
                    <span class="logo_link_label">JHU SOE</span>
                    <span class="logo_link_icon light">
                        <svg class="icon icon_logo_light">
                            <use href="/images/icons.svg#logo_light" />
                        </svg>
                    </span>
                    <span class="logo_link_icon dark">
                        <svg class="icon icon_logo_dark">
                            <use href="/images/icons.svg#logo_dark" />
                        </svg>
                    </span>
                </a>
            </div>
        </div>
        <div class="header_small_spacer"></div>
    </div>

    <div class="header_group">
        <div class="header_large">
            <div class="header_primary">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="header_primary_inner">
                            <div class="header_primary_group">
                                <div class="header_logo_large">
                                    <div class="logo logo_header_large logo_icon">
                                        <a class="logo_link" href="#">
                                            <span class="logo_link_label">JHU SOE</span>
                                            <span class="logo_link_icon light">
                                                <svg class="icon icon_logo_light">
                                                    <use href="/images/icons.svg#logo_light" />
                                                </svg>
                                            </span>
                                            <span class="logo_link_icon dark">
                                                <svg class="icon icon_logo_dark">
                                                    <use href="/images/icons.svg#logo_dark" />
                                                </svg>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="page_header">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="page_header_inner">
                        <div class="page_header_group">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- END: Header -->
<!-- Header -->
<noscript>
	<iframe src="//www.googletagmanager.com/ns.html?id=GTM-K6P58WP" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

<header class="js-header header header_landing{% if page.background %} has_background{% endif %}{% if page.image %} has_media{% endif %}" id="header">
	<div class="js-alert-wrapper">
		{% if page.alert == true %}
			{% set alert_path = page.alert_path|default('/components/render/partial-alert') %}
			<!-- WordPress / Drupal, use AlertURL to target the script that returns this content. For BigTree, enter the alert markup here. -->
			<script>
				var AlertURL = "{{ alert_path|path }}";
			</script>
		{% endif %}
	</div>

	<div class="header_small">

		<div class="header_logo_small">
			<div class="logo logo_header_small logo_icon">
				<a class="logo_link" href="#">
					<span class="logo_link_label">{{ config.name }}</span>
					<span class="logo_link_icon light">{{ icon('logo_light') }}</span>
					<span class="logo_link_icon dark">{{ icon('logo_dark') }}</span>
				</a>
			</div>
		</div>
		<div class="header_small_spacer"></div>
	</div>

	<div class="header_group">
		{% if page.background %}
			<figure class="header_group_figure">
				{% include '@partial-picture' with {
					class: 'header_group',
					image: page.background,
					alt: '',
					loading: 'eager',
					default: img.square.sml,
					sources: {
						'1200px': img.ultrawide.xlrg,
						'980px': img.ultrawide.lrg,
						'740px': img.ultrawide.med,
						'500px': img.square.med
					}
				} %}
			</figure>
		{% endif %}
		<div class="header_large">
			<div class="header_primary">
				<div class="fs-row">
					<div class="fs-cell">
						<div class="header_primary_inner">
							<div class="header_primary_group">
								<div class="header_logo_large">
									<div class="logo logo_header_large logo_icon">
										<a class="logo_link" href="#">
											<span class="logo_link_label">{{ config.name }}</span>
											<span class="logo_link_icon light">{{ icon('logo_light') }}</span>
											<span class="logo_link_icon dark">{{ icon('logo_dark') }}</span>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		{% if page.breadcrumbNav != false or page.title  %}
			<div class="page_header">
				<div class="fs-row">
					<div class="fs-cell">
						<div class="page_header_inner">
							<div class="page_header_group">
								{% if page.title or page.position %}
									<div class="page_intro">
										{% if 'center_landing' in page.classes and page.link %}
											<div class="page_action">
												<a class="page_action_link" href="{{ page.link.url }}">
													<span class="page_action_link_label">{{ page.link.label }}</span>
												</a>
											</div>
										{% endif %}
									</div>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
		{% endif %}
	</div>
</header>
<!-- END: Header -->

No notes defined.