Washington National Cathedral Component Library

Page Header 

<div class="page_header">
    <div class="page_header_inner">
        <div class="page_breadcrumb">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="page_breadcrumb_inner">

                        <div class="breadcrumb">
                            <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                                <div class="breadcrumb_nav_header">
                                    <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                                </div>
                                <ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
                                    <li class="breadcrumb_item breadcrumb_item_home">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Home</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb_divider" aria-hidden="true">/</span>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Navigation Level</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb_divider" aria-hidden="true">/</span>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Parent Level</span>
                                            </span>
                                        </a>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="page_nav">
    <div class="fs-row page_nav_row">
        <div class="fs-cell page_nav_cell">
            <div class="page_nav_inner">
                <a class="skip_link skip_subnav" id="skip_sub_link" href="#page_content">Skip Sub Navigation</a>

                <div class="js-sub-nav-group sub_nav_group sub_nav_group_small">

                    <button class="js-sub-nav-toggle js-swap sub_nav_toggle " data-swap-target=".js-sub-nav-group">
                        <span class="sub_nav_toggle_inner_default sub_nav_toggle_inner">
                            <span class="sub_nav_toggle_label_default sub_nav_toggle_label">Explore This Section</span>
                            <span class="sub_nav_toggle_icon_default sub_nav_toggle_icon" aria-hidden="true">

                                <svg class="icon icon_more">
                                    <use href="/images/icons.svg#more" />
                                </svg>

                            </span>
                        </span>
                        <span class="sub_nav_toggle_inner_active sub_nav_toggle_inner">
                            <span class="sub_nav_toggle_label_active sub_nav_toggle_label">Close</span>
                            <span class="sub_nav_toggle_icon_active sub_nav_toggle_icon" aria-hidden="true">

                                <svg class="icon icon_close">
                                    <use href="/images/icons.svg#close" />
                                </svg>

                            </span>
                        </span>
                    </button>
                    <nav class="js-sub-nav sub_nav" aria-labelledby="sub_nav_title">
                        <div class="sub_nav_header">
                            <h2 class="sub_nav_title" id="sub_nav_title">Sub Nav Title</h2>
                        </div>
                        <div class="js-sub-nav-body sub_nav_body">
                            <div class="js-sub-nav-body-inner sub_nav_body_inner">
                                <ul class="js-sub-nav-list sub_nav_list" aria-labelledby="sub_nav_title">
                                    <li class="sub_nav_item">
                                        <a class="sub_nav_link" href="#">
                                            <span class="sub_nav_link_label">Special & Seasonal Programs</span>
                                        </a>
                                    </li>
                                    <li class="sub_nav_item">
                                        <a class="sub_nav_link" href="#">
                                            <span class="sub_nav_link_label">Racial & Social Justice</span>
                                        </a>
                                    </li>
                                    <li class="sub_nav_item">
                                        <a class="sub_nav_link" href="#">
                                            <span class="sub_nav_link_label">Veterans & Military Families</span>
                                        </a>
                                    </li>
                                    <li class="sub_nav_item active">
                                        <a class="sub_nav_link" href="#">
                                            <span class="sub_nav_link_label">Center for Prayer & Pilgrimage</span>
                                        </a>
                                    </li>
                                    <li class="sub_nav_item">
                                        <a class="sub_nav_link" href="#">
                                            <span class="sub_nav_link_label">Cathedral Scholars Program</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
 
{#
	{% include '@partial-page-header' with {
		page: page
	} %}
#}
<div class="page_header{% if page.background %} background_{{ page.background }}{% endif %}">
	{% if ('layout_detail' not in page.classes and page.image) or ('layout_detail' not in page.classes and page.video) %}
	<div class="page_header_media {% if page.video %}has_video{% endif %}">
		<div class="page_header_media_inner">
			{% if page.image %}
			<figure class="page_header_figure">
				{% include '@partial-picture' with {
					class: 'page_header',
					image: page.image,
					alt: '',
					loading: 'eager',
					default: img.portraitClassic.xxsml,
					sources: {
						'1200px': img.classic.xlrg,
						'980px': img.classic.lrg,
						'740px': img.square.med,
						'500px': img.square.sml
					}
				} %}
			</figure>
			{% endif %}

			{% if page.video %}
			<div class="page_header_video">
				{% include "@partial-lazy-video" with {
					class: 'page_header_bg',
					id: page.video,
					type: 'vimeo',
					title: 'Some Video Title',
				} %}
			</div>
			{% endif %}
		</div>
	</div>
	{% endif %}
	<div class="page_header_inner">
		{% if page.breadcrumbNav != false  %}
		<div class="page_breadcrumb">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="page_breadcrumb_inner">
						{% render '@navigation-breadcrumb' with {
							page: page,
							modifier: '',
							links: page.breadcrumbNav,
							icon_home: '',
							icon_divider: 'angle_right',
							icon_end: ''
						} %}
					</div>
				</div>
			</div>
		</div>
		{% endif %}

		{% if page.title or page.description %}
		<div class="page_intro">
			<div class="fs-row">
				<div class="fs-cell fs-lg-10 fs-xl-9 fs-lg-justify-center">
					<div class="page_intro_inner">
						{% if page.title %}
						<h1 class="page_title" id="page_title" tabindex="-1">{{ page.title }}</h1>
						{% endif %}
						<div class="page_intro_divider">{{ icon('pattern') }}</div>
						{% if page.description %}
						<p class="page_description">{{ page.description }}</p>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
		{% endif %}

		{% if page.date or page.location or page.ticket or page.category %}
			<div class="page_info_wrapper">
				<div class="fs-row">
					<div class="fs-cell">
						<div class="page_info">
							{% if page.date %}
							<div class="page_bit page_date">
								<div class="page_bit_inner">
									<span class="page_bit_icon">{{ icon('calendar') }}</span>
									<span class="page_bit_label">{{ page.date }}</span>
								</div>
							</div>
							{% endif %}
							{% if page.category %}
							<div class="page_bit page_category">
								<div class="page_bit_inner">
									<span class="page_bit_icon">{{ icon('label') }}</span>
									<a class="page_bit_label page_bit_label_link" href="">{{ page.category }}</a>
								</div>
							</div>
							{% endif %}
							{% if page.location %}
							<div class="page_bit page_location">
								<div class="page_bit_inner">
									<span class="page_bit_icon">{{ icon('place') }}</span>
									<button class="js-swap page_location_toggle page_bit_label" data-swap-target=".page_location" data-swap-linked=".page_location_toggle" type="button">{{ page.location }}</button>
								</div>
								<div class="page_location_modal">
									<div class="page_location_modal_figure">
										{% include '@partial-image' with {
											class: 'page_location_modal',
											alt: '',
											image: item.image,
											loading: 'lazy',
											sources: [
												img.portraitClassic.xsml,
												img.portraitClassic.xxsml
											]
										} %}
									</div>
									<div class="page_location_modal_main">
										<div class="page_location_modal_title">{{ page.locationObject.title }}</div>
										<div class="page_location_modal_content">{{ page.locationObject.content }}</div>
										<a class="page_location_modal_link" href="{{ page.locationObject.link.href }}">{{ page.locationObject.link.title }}</a>
									</div>
									<button class="js-swap page_location_toggle page_location_modal_close" data-swap-target=".page_location" data-swap-linked=".page_location_toggle" type="button">
										<span class="page_location_modal_close_label">Close</span>
										<span class="page_location_modal_close_icon">{{ icon('close') }}</span>
									</button>
								</div>
							</div>
							{% endif %}
							{% if page.ticket %}
							<div class="page_bit page_location">
								<div class="page_bit_inner">
									<span class="page_bit_icon">{{ icon('free') }}</span>
									<span class="page_bit_label">{{ page.ticket }}</span>
								</div>
							</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		{% endif %}
	</div>
</div>
{% if page.subNav != false  %}
	<div class="page_nav">
		<div class="fs-row page_nav_row">
			<div class="fs-cell page_nav_cell">
				<div class="page_nav_inner">
					<a class="skip_link skip_subnav" id="skip_sub_link" href="#page_content">Skip Sub Navigation</a>
					{% render '@navigation-sub' with {
						modifier: '',
						title: page.title,
						parent: page.parent
					} %}
				</div>
			</div>
		</div>
	</div>
{% endif %}

No notes defined.