<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-2">
<nav class="breadcrumb__nav" aria-labelledby="breadcrumb-2__nav-title">
<div class="breadcrumb__nav-header">
<h2 class="breadcrumb__nav-title" id="breadcrumb-2__nav-title">
You are here:
</h2>
</div>
<ol class="breadcrumb__list" aria-labelledby="breadcrumb-2__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?1.0.0#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?1.0.0#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?1.0.0#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?1.0.0#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?1.0.0#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?1.0.0#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?1.0.0#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?1.0.0#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?1.0.0#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?1.0.0#angle-right" />
</svg>
</span>
</li>
<li class="breadcrumb__item" aria-current="page">
<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?1.0.0#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__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-flat
" id="sub-nav-flat-2" aria-labelledby="sub-nav-flat-2__title">
<div class="sub-nav-flat__header">
<h2 class="sub-nav-flat__title" id="sub-nav-flat-2__title">Nullam dictum felis eu</h2>
</div>
<ul class="sub-nav-flat__list" aria-labelledby="sub-nav-flat-2__title">
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-1item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-link-label">Lorem Ipsum Cras id Dui.</span>
</div>
</a>
</li>
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-2item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-link-label">Aenean Massa Maecenas Malesuada</span>
</div>
</a>
</li>
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-3item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-link-label">Cum Sociis Natoque Penatibus Donec Praesent Nunc Nullam</span>
</div>
</a>
</li>
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-4item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-link-label">Donec Quam Curabitur Morbi Nullam Phasellus Sed id mi Vivamus</span>
</div>
</a>
</li>
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-5item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-link-label">Nulla</span>
</div>
</a>
</li>
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-6item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-link-label">Donec Pede Justo</span>
</div>
</a>
</li>
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-7item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-link-label">Etiam Rhoncus</span>
</div>
</a>
</li>
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-8item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-link-label">Maecenas Tempus</span>
</div>
</a>
</li>
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-9item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-link-label">Nam Quam Nunc Nullam Vestibulum Pellentesque Quisque</span>
</div>
</a>
</li>
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-10item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-link-label">Nullam Accumsan Lorem in Dui</span>
</div>
</a>
</li>
<li class="
sub-nav-flat__item
">
<a class="
sub-nav-flat__item-link
" id="sub-nav-flat-2__link-11item-link" href="#">
<div class="sub-nav-flat__item-link-inner">
<span class="sub-nav-flat__item-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
sub-nav-toggle
toggle-nav-overlay" id="toggle-nav-2" data-js-nav-toggle-group>
<div class="
toggle-nav__button
sub-nav-toggle__button
">
<button class="
button-toggle
button-bordered
" id="toggle-nav-2__button-toggle" data-js-nav-toggle-button="" data-js-swap="" data-swap-target="#toggle-nav-2">
<span class="
button-toggle__inner
button-toggle__inner--default
button-bordered__inner
"> <span class="button-toggle__label button-bordered__label">Explore This Section</span>
<span class="button-toggle__icon button-bordered__icon" aria-hidden="true">
<svg class="icon icon--plus">
<use href="/images/icons.svg?1.0.0#plus" />
</svg>
</span>
</span> <span class="
button-toggle__inner
button-toggle__inner--active
button-bordered__inner
">
<span class="button-toggle__label button-bordered__label">Close</span>
<span class="button-toggle__icon button-bordered__icon" aria-hidden="true">
<svg class="icon icon--minus">
<use href="/images/icons.svg?1.0.0#minus" />
</svg>
</span>
</span>
</button>
</div>
<div class="
toggle-nav__panel
sub-nav-toggle__panel
" data-js-nav-toggle-panel>
<nav class="
toggle-nav__nav
sub-nav-toggle__nav
" id="toggle-nav-2__nav" aria-labelledby="toggle-nav-2__title">
<div class="
toggle-nav__header
sub-nav-toggle__header
">
<h2 class="
toggle-nav__title
sub-nav-toggle__title
" id="toggle-nav-2__title">nullam dictum felis eu</h2>
</div>
<ul class="
toggle-nav__list
sub-nav-toggle__list
" id="toggle-nav-2__list" aria-labelledby="toggle-nav-2__title">
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-1" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-1__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__link-label
">Lorem Ipsum Cras id Dui.</span>
</div>
</a>
</li>
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-2" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-2__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__link-label
">Aenean Massa Maecenas Malesuada</span>
</div>
</a>
</li>
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-3" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-3__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__link-label
">Cum Sociis Natoque Penatibus Donec Praesent Nunc Nullam</span>
</div>
</a>
</li>
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-4" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-4__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__link-label
">Donec Quam Curabitur Morbi Nullam Phasellus Sed id mi Vivamus</span>
</div>
</a>
</li>
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-5" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-5__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__link-label
">Nulla</span>
</div>
</a>
</li>
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-6" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-6__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__link-label
">Donec Pede Justo</span>
</div>
</a>
</li>
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-7" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-7__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__link-label
">Etiam Rhoncus</span>
</div>
</a>
</li>
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-8" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-8__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__link-label
">Maecenas Tempus</span>
</div>
</a>
</li>
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-9" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-9__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__link-label
">Nam Quam Nunc Nullam Vestibulum Pellentesque Quisque</span>
</div>
</a>
</li>
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-10" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-10__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__link-label
">Nullam Accumsan Lorem in Dui</span>
</div>
</a>
</li>
<li class="
toggle-nav__item
sub-nav-toggle__item
" id="toggle-nav-2__item-11" data-js-nav-toggle-item>
<a class="
toggle-nav__item-link
sub-nav-toggle__item-link
" id="toggle-nav-2__item-11__item-link" href="#" data-js-nav-toggle-link>
<div class="
toggle-nav__item-link-inner
sub-nav-toggle__item-link-inner
">
<span class="
toggle-nav__link-label
sub-nav-toggle__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'
]
} only %}
{% 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 %} page-header__media--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'
} only %}
</figure>
{% endif %}
{% if page.video %}
<div class="page-header__video">
{% include "@partial-lazy-video" with {
classes: {
base: 'page-header__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'
} only %}
<div class="page-header__nav-flat">
{% include '@navigation-basic' with {
classes: {
base: 'sub-nav-flat',
modifiers: [],
utility: ''
},
title: page.title,
links: page.subNav
} %}
</div>
<div class="page-header__nav-toggle">
{% include '@navigation-toggle' with {
classes: {
base: 'sub-nav-toggle',
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.