<div class="
page_header
" id="page_header">
<div class="page_header_inner">
<div class="page_header_group">
<div class="page_header_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_breadcrumb_inner">
<div class="
breadcrumb
" id="breadcrumb_4">
<nav class="breadcrumb_nav" aria-labelledby="breadcrumb_4_nav_title">
<div class="breadcrumb_nav_header">
<h2 class="breadcrumb_nav_title" id="breadcrumb_4_nav_title">
You are here:
</h2>
</div>
<ol class="breadcrumb_list" aria-labelledby="breadcrumb_4_nav_title">
<li class="breadcrumb_item breadcrumb_item_home">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_icon" aria-hidden="true">
<svg class="icon icon_home">
<use href="/images/icons.svg#home" />
</svg>
</span>
<span class="breadcrumb_pill_label">
Home
</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
Lorem ipsum dolor sit
</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
Aenean commodo
</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
Cum sociis natoque
</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
Quisque rutrum
</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
Aenean imperdiet
</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
Maecenas tempus, tellus eget condimentum rhoncus
</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
Sed fringilla mauris sit amet nibh
</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
Duis leo
</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
Nullam dictum felis eu
</span>
</span>
</span>
<span class="breadcrumb_end" aria-hidden="true">
<svg class="icon icon_angle_down">
<use href="/images/icons.svg#angle_down" />
</svg>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="page_header_intro">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-9">
<div class="page_header_intro_inner">
<h1 class="page_header_title" id="page_header_title" tabindex="-1">
Nullam dictum felis eu
</h1>
<p class="page_header_description">
Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="page_header_media has_video">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_media_inner">
<figure class="page_header_figure">
<img class="page_header_image" srcset="https://images.fastspot.com/framework/1440x810/2 1440w, https://images.fastspot.com/framework/1220x686/2 1220w, https://images.fastspot.com/framework/980x552/2 980w, https://images.fastspot.com/framework/740x416/2 740w, https://images.fastspot.com/framework/500x282/2 500w, https://images.fastspot.com/framework/300x169/2 300w" src="https://images.fastspot.com/framework/300x169/2" alt="" loading="eager" width="300" height="169">
</figure>
<div class="page_header_video">
<div class="page_header_bg_lazy_video lazy_video " data-js-video-lazy-load='{"id":"258133523","type":"vimeo","display":"inline","autoplay":false,"playerVars":{}}'>
<a class="lazy_video_toggle_btn" data-js-play-btn href="" aria-label="Play Fastspot Moments">
<svg class="icon icon_video_play">
<use href="/images/icons.svg#video_play" />
</svg>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target" data-js-iframe-target></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page_header_nav">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_nav_inner">
<a class="
button_bordered
skip_link
" id="skip_sub_link" href="#full_width_components">
<span class="button_bordered_inner">
<span class="button_bordered_label">
Skip Sub Navigation
</span>
</span>
</a>
<div class="page_header_nav_flat">
<nav class="
sub_nav
" id="sub_nav_4" aria-labelledby="sub_nav_4_title">
<div class="sub_nav_header">
<h2 class="sub_nav_title" id="sub_nav_4_title">
Nullam dictum felis eu
</h2>
</div>
<ul class="sub_nav_list" aria-labelledby="sub_nav_4_title">
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_1" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Lorem Ipsum Cras id Dui.
</span>
</div>
</a>
</li>
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_2" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Aenean Massa Maecenas Malesuada
</span>
</div>
</a>
</li>
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_3" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Cum Sociis Natoque Penatibus Donec Praesent Nunc Nullam
</span>
</div>
</a>
</li>
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_4" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Donec Quam Curabitur Morbi Nullam Phasellus Sed id mi Vivamus
</span>
</div>
</a>
</li>
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_5" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Nulla
</span>
</div>
</a>
</li>
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_6" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Donec Pede Justo
</span>
</div>
</a>
</li>
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_7" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Etiam Rhoncus
</span>
</div>
</a>
</li>
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_8" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Maecenas Tempus
</span>
</div>
</a>
</li>
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_9" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Nam Quam Nunc Nullam Vestibulum Pellentesque Quisque
</span>
</div>
</a>
</li>
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_10" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Nullam Accumsan Lorem in Dui
</span>
</div>
</a>
</li>
<li class="
sub_nav_item
">
<a class="sub_nav_link" id="sub_nav_4_link_11" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">
Aenean ut Eros et Nisl Sagittis Vestibulum
</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
<div class="page_header_nav_toggle">
<div class="
toggle_nav_group
sub_nav_group
toggle_nav_overlay
" id="toggle_nav_4_group" data-js-nav-toggle-group>
<div class="toggle_nav_button sub_nav_button">
<button class="
button_toggle
button_bordered
" id="toggle_nav_4_toggle" data-js-nav-toggle-button="" data-js-swap="" data-swap-target="#toggle_nav_4_group">
<span class="button_bordered_inner button_toggle_inner button_toggle_inner_default">
<span class="button_bordered_label button_toggle_label">
Explore This Section
</span>
<span class="button_bordered_icon button_toggle_icon" aria-hidden="true">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</span>
<span class="button_bordered_inner button_toggle_inner button_toggle_inner_active">
<span class="button_bordered_label button_toggle_label">
Close
</span>
<span class="button_bordered_icon button_toggle_icon" aria-hidden="true">
<svg class="icon icon_minus">
<use href="/images/icons.svg#minus" />
</svg>
</span>
</span>
</button>
</div>
<div class="
toggle_nav_panel
sub_nav_panel
" data-js-nav-toggle-panel>
<nav class="
toggle_nav
sub_nav
" id="toggle_nav_4" aria-labelledby="toggle_nav_4_title">
<div class="toggle_nav_header sub_nav_header">
<h2 class="toggle_nav_title sub_nav_title" id="toggle_nav_4_title">
nullam dictum felis eu
</h2>
</div>
<ul class="toggle_nav_list sub_nav_list" id="toggle_nav_4_list" aria-labelledby="toggle_nav_4_title">
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_1" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_1_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Lorem Ipsum Cras id Dui.
</span>
</div>
</a>
</li>
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_2" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_2_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Aenean Massa Maecenas Malesuada
</span>
</div>
</a>
</li>
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_3" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_3_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Cum Sociis Natoque Penatibus Donec Praesent Nunc Nullam
</span>
</div>
</a>
</li>
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_4" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_4_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Donec Quam Curabitur Morbi Nullam Phasellus Sed id mi Vivamus
</span>
</div>
</a>
</li>
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_5" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_5_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Nulla
</span>
</div>
</a>
</li>
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_6" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_6_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Donec Pede Justo
</span>
</div>
</a>
</li>
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_7" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_7_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Etiam Rhoncus
</span>
</div>
</a>
</li>
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_8" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_8_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Maecenas Tempus
</span>
</div>
</a>
</li>
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_9" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_9_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Nam Quam Nunc Nullam Vestibulum Pellentesque Quisque
</span>
</div>
</a>
</li>
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_10" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_10_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Nullam Accumsan Lorem in Dui
</span>
</div>
</a>
</li>
<li class="toggle_nav_item sub_nav_item" id="toggle_nav_4_item_11" data-js-nav-toggle-item>
<a class="toggle_nav_link sub_nav_link" id="toggle_nav_4_item_11_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="toggle_nav_link_label sub_nav_link_label">
Aenean ut Eros et Nisl Sagittis Vestibulum
</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{#
{% include '@component-page-header' with {
page: page
} %}
#}
{% set id = 'page_header' %}
{% set has_media = 'layout_detail' not in page.classes and (page.image is not empty or page.video is not empty) %}
<div
class="
page_header
{% if page.background %}page_header_has_background{% endif %}
"
id="{{ id }}"
>
<div class="page_header_inner">
<div class="page_header_group">
{% if page.background %}
<div class="page_header_background">
{% include '@partial-image' with {
class: 'page_header_background_image',
image: page.background.image,
alt: '',
loading: 'eager',
crop: 'wide',
max: 'xlrg',
sizes: [
'100vw'
]
} %}
{% if page.background.video %}
{% include "@partial-background-video" with {
video: page.background.video
} %}
{% endif %}
</div>
{% endif %}
{% if page.breadcrumbNav != false %}
<div class="page_header_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_breadcrumb_inner">
{% include '@navigation-breadcrumb' with {
page: page,
classes: {
modifiers: [],
utility: ''
},
links: page.breadcrumbNav,
icon_home: 'home',
icon_divider: 'angle_right',
icon_end: 'angle_down'
} %}
</div>
</div>
</div>
</div>
{% endif %}
{% if page.title or page.description %}
<div class="page_header_intro">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-9">
<div class="page_header_intro_inner">
{% if page.title %}
<h1 class="page_header_title" id="page_header_title" tabindex="-1">
{{ page.title }}
</h1>
{% endif %}
{% if page.description %}
<p class="page_header_description">
{{ page.description }}
</p>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
</div>
{% if has_media %}
<div class="page_header_media{% if page.video %} has_video{% endif %}">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_media_inner">
{% if page.image %}
<figure class="page_header_figure">
{% include '@partial-image' with {
class: 'page_header_image',
image: page.image,
alt: page.alt,
loading: 'eager',
crop: 'wide',
max: 'xlrg'
} %}
</figure>
{% endif %}
{% if page.video %}
<div class="page_header_video">
{% include "@partial-lazy-video" with {
classes: {
base: 'page_header_bg_lazy_video',
modifiers: []
},
video: {
id: page.video.id,
type: page.video.type,
title: page.video.title
},
autoplay: page.video.autoplay|default(false),
playerVars: {}
} %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
{% if page.subNav != false %}
<div class="page_header_nav">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_nav_inner">
{% include '@partial-link' with {
classes: {
base: 'button_bordered',
utility: 'skip_link'
},
id: 'skip_sub_link',
title: 'Skip Sub Navigation',
url: '#full_width_components'
} %}
<div class="page_header_nav_flat">
{% include '@navigation-basic' with {
classes: {
base: 'sub_nav',
modifiers: [],
utility: ''
},
title: page.title,
active_index: '',
links: page.subNav
} %}
</div>
<div class="page_header_nav_toggle">
{% include '@navigation-toggle' with {
classes: {
base: 'sub_nav',
modifiers: [],
utility: 'toggle_nav_overlay'
},
title: page.title|lower,
links: page.subNav,
icon: '',
child_icon: '',
toggle: {
classes: {
base: 'button_bordered'
},
default: {
title: 'Explore This Section',
icon: 'plus'
},
active: {
title: 'Close',
icon: 'minus'
}
}
} %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
No notes defined.