Page Header: Inline Photo

WIP

HTML
View
Info
Notes


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

        <div class="fw-container">
            <div class="
				page-header__group
									has-media
							">

                <div class="page-header__breadcrumb">
                    <div class="page-header__breadcrumb-inner">

                        <div class="
		breadcrumb
				" id="breadcrumb-3">
                            <nav class="breadcrumb__nav" aria-labelledby="breadcrumb-3__nav-title">
                                <div class="breadcrumb__nav-header">
                                    <h2 class="breadcrumb__nav-title" id="breadcrumb-3__nav-title">
                                        You are here:
                                    </h2>
                                </div>
                                <ol class="breadcrumb__list" aria-labelledby="breadcrumb-3__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--caret-right">
                                                <use href="/images/icons.svg?1.0.0#caret-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</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb__divider" aria-hidden="true">
                                            <svg class="icon icon--caret-right">
                                                <use href="/images/icons.svg?1.0.0#caret-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">Etiam Rhoncus</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb__divider" aria-hidden="true">
                                            <svg class="icon icon--caret-right">
                                                <use href="/images/icons.svg?1.0.0#caret-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>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="page-header__intro" id="skip-main-destination" tabindex="-1">
                    <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 class="page-header__media">
                    <div class="page-header__media-inner">
                        <figure class="page-header__figure">

                            <img class="page-header__image" srcset="https://images.fastspot.com/framework/1440x960/1 1440w, https://images.fastspot.com/framework/1220x814/1 1220w, https://images.fastspot.com/framework/980x654/1 980w, https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="eager" width="300" height="200">
                        </figure>

                    </div>
                </div>
            </div>
        </div>
        <div class="page-header__bar"></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">
                        <div class="page-header__nav-marker">Nullam</div>

                        <nav class="sub-nav-flat
 				" id="sub-nav-flat-3" aria-labelledby="sub-nav-flat-3__title">
                            <div class="sub-nav-flat__header">
                                <h2 class="sub-nav-flat__title" id="sub-nav-flat-3__title">Nullam dictum felis eu</h2>
                            </div>
                            <ul class="sub-nav-flat__list" aria-labelledby="sub-nav-flat-3__title">
                                <li class="
						sub-nav-flat__item
														">
                                    <a class="
							sub-nav-flat__item-link
											" id="sub-nav-flat-3__link-1item-link" href="#">
                                        <div class="sub-nav-flat__item-link-inner">
                                            <span class="sub-nav-flat__item-link-label">Lorem Ipsum Cras</span>
                                        </div>
                                    </a>
                                </li>

                                <li class="
						sub-nav-flat__item
														">
                                    <a class="
							sub-nav-flat__item-link
											" id="sub-nav-flat-3__link-2item-link" href="#">
                                        <div class="sub-nav-flat__item-link-inner">
                                            <span class="sub-nav-flat__item-link-label">Donec Quam Curabitur</span>
                                        </div>
                                    </a>
                                </li>

                                <li class="
						sub-nav-flat__item
														">
                                    <a class="
							sub-nav-flat__item-link
											" id="sub-nav-flat-3__link-3item-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-3__link-4item-link" href="#">
                                        <div class="sub-nav-flat__item-link-inner">
                                            <span class="sub-nav-flat__item-link-label">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-3" data-js-nav-toggle-group>
                            <div class="
			toggle-nav__button
			sub-nav-toggle__button
		">

                                <button class="
		button-toggle
		button-bordered
 				" id="toggle-nav-3__button-toggle" data-js-nav-toggle-button="">
                                    <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-3__nav" aria-labelledby="toggle-nav-3__title">
                                    <div class="
					toggle-nav__header
					sub-nav-toggle__header
				">
                                        <h2 class="
						toggle-nav__title
						sub-nav-toggle__title
					" id="toggle-nav-3__title">Explore This Section</h2>
                                    </div>
                                    <ul class="
					toggle-nav__list
					sub-nav-toggle__list
				" id="toggle-nav-3__list" aria-labelledby="toggle-nav-3__title">
                                        <li class="
							toggle-nav__item
							sub-nav-toggle__item
													" id="toggle-nav-3__item-1" data-js-nav-toggle-item>
                                            <a class="
								toggle-nav__item-link
								sub-nav-toggle__item-link
															" id="toggle-nav-3__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</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
							toggle-nav__item
							sub-nav-toggle__item
													" id="toggle-nav-3__item-2" data-js-nav-toggle-item>
                                            <a class="
								toggle-nav__item-link
								sub-nav-toggle__item-link
															" id="toggle-nav-3__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
									">Donec Quam Curabitur</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
							toggle-nav__item
							sub-nav-toggle__item
													" id="toggle-nav-3__item-3" data-js-nav-toggle-item>
                                            <a class="
								toggle-nav__item-link
								sub-nav-toggle__item-link
															" id="toggle-nav-3__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
									">Etiam Rhoncus</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="
							toggle-nav__item
							sub-nav-toggle__item
													" id="toggle-nav-3__item-4" data-js-nav-toggle-item>
                                            <a class="
								toggle-nav__item-link
								sub-nav-toggle__item-link
															" id="toggle-nav-3__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
									">Sagittis Vestibulum</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </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="fw-container">
			<div class="
				page-header__group
				{% if has_media %}
					has-media
				{% endif %}
			">
				{# {% 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="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: 'caret-right',
								icon_end: ''
							} %}
						</div>
					</div>
				{% endif %}

				{% if page.title or page.description %}
					<div
						class="page-header__intro"
						id="skip-main-destination"
						tabindex="-1"
					>
						<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>
				{% endif %}

				{% if has_media %}
					<div class="page-header__media{% if page.video %} page-header__media--has-video{% endif %}">
						<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: 'classic',
										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>
				{% endif %}
			</div>
		</div>
		<div class="page-header__bar"></div>
		{% 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">
							<div class="page-header__nav-marker">{{page.post_title}}</div>
							{% 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: 'toggle-nav-overlay'
								},
								title: sub_nav_toggle_title,
								heading_level: item_heading_level,
								links: page.subNav,
								icon: '',
								child_icon: '',
								toggle: {
									classes: {
										base: 'button-bordered'
									},
									default: {
										title: sub_nav_toggle_title,
										icon: 'plus'
									},
									active: {
										title: 'Close',
										icon: 'minus'
									}
								}
							} %}
						</div>
					</div>
				</div>
			</div>
		{% endif %}
	</div>
</div>

Handle: @component-page-header--inline-photo
Variants (2): No Media , Inline Photo
Preview:
- With layout
- Component only
Filesystem Path: src/twig/components/page-header/page-header.twig
References (8): @component-page-header, @partial-image, @partial-background-video, @navigation-breadcrumb, @partial-lazy-video, @partial-link, @navigation-basic, @navigation-toggle

No notes defined.