Page Header: No Media

WIP

HTML
View
Info
Notes


        
        <div class="
		page-header
			" id="page-header">
    <div class="page-header__inner">
        <div class="page-header__group">

            <div class="page-header__breadcrumb">
                <div class="fw-container">
                    <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 class="page-header__intro" id="skip-main-destination" tabindex="-1">
                <div class="fw-container">
                    <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 class="page-header__nav">
            <div class="fw-container">
                <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">

                        <!-- Toggle Navigation -->
                        <div class="
		sub-nav-toggle
 				" id="sub-nav-toggle-3">
                            <div class="sub-nav-toggle__button">

                                <button class="button-bordered
 				sub-nav-toggle__trigger" popovertarget="sub-nav-toggle-3__panel">
                                    <span class="button-bordered__inner"> <span class="button-bordered__label">Explore This Section</span>
                                        <span class="button-bordered__icon" aria-hidden="true"><svg class="icon icon--plus">
                                                <use href="/images/icons.svg?1.0.0#plus" />
                                            </svg></span>
                                    </span>
                                </button>
                            </div>
                            <div class="sub-nav-toggle__panel" id="sub-nav-toggle-3__panel" popover="auto" data-js-popover='{"closeOnBlur":true}'>

                                <nav class="sub-nav-toggle
 				" id="sub-nav-toggle-4" aria-labelledby="sub-nav-toggle-4__title">
                                    <div class="sub-nav-toggle__header">
                                        <h2 class="sub-nav-toggle__title" id="sub-nav-toggle-4__title">Explore This Section</h2>
                                    </div>
                                    <ul class="sub-nav-toggle__list" aria-labelledby="sub-nav-toggle-4__title">
                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-1item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Lorem Ipsum Cras id Dui.</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-2item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Aenean Massa Maecenas Malesuada</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-3item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Cum Sociis Natoque Penatibus Donec Praesent Nunc Nullam</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-4item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Donec Quam Curabitur Morbi Nullam Phasellus Sed id mi Vivamus</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-5item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Nulla</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-6item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Donec Pede Justo</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-7item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Etiam Rhoncus</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-8item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Maecenas Tempus</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-9item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Nam Quam Nunc Nullam Vestibulum Pellentesque Quisque</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-10item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Nullam Accumsan Lorem in Dui</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
						sub-nav-toggle__item
														">
                                            <a class="
							sub-nav-toggle__item-link
											" id="sub-nav-toggle-4__link-11item-link" href="#">
                                                <div class="sub-nav-toggle__item-link-inner">
                                                    <span class="sub-nav-toggle__item-link-label">Aenean ut Eros et Nisl Sagittis Vestibulum</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <!-- END: Toggle Navigation -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        {#
	{% include '@component-page-header' with {
		page: page
	} %}
#}

{% set sub_nav_toggle_title = sub_nav_toggle_title|default('Explore This Section') %}

{% set id = 'page-header' %}
{% set heading_level = heading_level ?? 1 %}
{% set group_heading_tag = 'h' ~ (heading_level) %}
{% set item_heading_level = heading_level + 1 %}
{% set item_heading_tag = has_group_title ? 'h' ~ (heading_level + 1) : 'h' ~ (heading_level) %}
{% set has_media = 'layout-detail' not in page_classes and (page.image or page.video) %}

<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-video-background" with {
							video: page.background.video
						} %}
					{% endif %}
				</div>
			{% endif %}

			{% if page.breadcrumbNav != false  %}
				<div class="page-header__breadcrumb">
					<div class="fw-container">
						<div class="page-header__breadcrumb-inner">
							{% include '@navigation-breadcrumb' with {
								page: page,
								classes: {
									modifiers: [],
									utility: ''
								},
								heading_level: item_heading_level,
								links: page.breadcrumbNav,
								icon_home: 'home',
								icon_divider: 'angle-right',
								icon_end: 'angle-down'
							} %}
						</div>
					</div>
				</div>
			{% endif %}

			{% if page.title or page.description %}
				<div
					class="page-header__intro"
					id="skip-main-destination"
					tabindex="-1"
				>
					<div class="fw-container">
						<div class="page-header__intro-inner">
							{% if page.title %}
								<{{ group_heading_tag }}
									class="page-header__title"
									id="page-header__title"
									tabindex="-1"
								>
									{{- page.title -}}
								</{{ group_heading_tag }}>
							{% endif %}
							{% if page.description %}
								<p class="page-header__description">
									{{ page.description }}
								</p>
							{% endif %}
						</div>
					</div>
				</div>
			{% endif %}
		</div>

		{% if has_media %}
			<div class="page-header__media{% if page.video %} page-header__media--has-video{% endif %}">
				<div class="fw-container">
					<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-video-lazy" with {
									classes: {
										base: 'page-header__video-lazy',
										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>
		{% endif %}

		{% if page.subNav != false  %}
			<div class="page-header__nav">
				<div class="fw-container">
					<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,
								heading_level: item_heading_level,
								links: page.subNav
							} %}
						</div>
						<div class="page-header__nav-toggle">
							{% include '@navigation-toggle' with {
								classes: {
									base: 'sub-nav-toggle',
									modifiers: [],
									utility: ''
								},
								title: sub_nav_toggle_title,
								heading_level: item_heading_level,
								links: page.subNav,
								popover: true,
								button: {
									classes: {
										base: 'button-bordered',
										utility: 'sub-nav-toggle__trigger'
									},
									title: sub_nav_toggle_title,
									icon: 'plus'
								},
								settings: {
									closeOnBlur: true
								}
							} %}
						</div>
					</div>
				</div>
			</div>
		{% endif %}
	</div>
</div>

Handle: @component-page-header--default
Variants (7): No Media , Inline Photo , Inline Vimeo , Inline Youtube , Background Photo , Background Vimeo , Background Youtube
Preview:
- With layout
- Component only
Filesystem Path: src/twig/components/page-header/page-header.twig
References (8): @component-page-header, @partial-image, @partial-video-background, @navigation-breadcrumb, @partial-video-lazy, @partial-link, @navigation-basic, @navigation-toggle
Referenced by (29): @component-page-header--inline-photo, @component-page-header--inline-vimeo, @component-page-header--inline-youtube, @component-page-header--bg, @component-page-header--bg-vimeo, @component-page-header--bg-youtube, @template-404, @template-department-detail, @template-department-listing, @template-event-detail, @template-event-detail--image, @template-event-listing, @template-event-listing--category, @template-event-listing--no-results, @template-general-content, @template-general-content--alert, @template-general-content--photo, @template-general-content--video, @template-general-content--bg, @template-news-detail, @template-news-detail--image, @template-news-listing, @template-news-listing--category, @template-news-listing--no-results, @template-people-detail, @template-people-listing, @template-program-detail, @template-program-listing, @template-search

No notes defined.