VCUarts Component Library

Page Header: Department Detail 

<div class="js-background-video-container page_header">
    <div class="page_intro">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="page_intro_inner">
                    <div class="page_intro_meta department_page_intro_meta">
                        <div class="page_intro_group">
                            <div class="page_breadcrumb">

                                <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>
                                                <span class="breadcrumb_divider" aria-hidden="true">/</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>
                                            </li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                            <div class="department_page_meta">
                                <h1 class="department_page_title" id="page_title" tabindex="-1">
                                    <span class="department_page_title_prefix">Department of </span>
                                    <span class="department_page_title_suffix">Nullam dictum felis eu</span>
                                </h1>
                                <div class="department_page_degree">
                                    <p class="department_page_degree_title">Degrees Offered</p>
                                    <p class="department_page_degree_description"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page_subnav">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="page_subnav_inner">
                    <a class="skip_link skip_subnav" id="skip_sub_link" href="#page_content">Skip Sub Navigation</a>
                    <div class="page_nav_flat">

                        <nav class="sub_nav" aria-labelledby="basic_nav_title-34">
                            <div class="sub_nav_header">
                                <h2 class="sub_nav_title" id="basic_nav_title-34">Nullam dictum felis eu</h2>
                            </div>
                            <ul class="sub_nav_list" aria-labelledby="basic_nav_title-34">
                            </ul>
                        </nav>
                    </div>
                    <div class="page_subnav_toggle">
                        <h2 class="page_subnav_toggle_title">In This Section</h2>

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

                            <button class="js-sub-nav-toggle js-nav-toggle-button js-swap sub_nav_toggle button_toggle" data-swap-target=".js-sub-nav-group" data-swap-linked="sub">
                                <span class="sub_nav_toggle_inner_default sub_nav_toggle_inner button_toggle_inner_default button_toggle_inner">
                                    <span class="sub_nav_toggle_label_default sub_nav_toggle_label button_toggle_label_default button_toggle_label">Select Section</span>
                                    <span class="sub_nav_toggle_icon_default sub_nav_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">

                                        <svg class="icon icon_chevron_down">
                                            <use href="/images/icons.svg#chevron_down" />
                                        </svg>

                                    </span>
                                </span>
                                <span class="sub_nav_toggle_inner_active sub_nav_toggle_inner button_toggle_inner_active button_toggle_inner">
                                    <span class="sub_nav_toggle_label_active sub_nav_toggle_label button_toggle_label_active button_toggle_label">Close</span>
                                    <span class="sub_nav_toggle_icon_active sub_nav_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">

                                        <svg class="icon icon_chevron_down">
                                            <use href="/images/icons.svg#chevron_down" />
                                        </svg>

                                    </span>
                                </span>
                            </button>
                            <div class="js-nav-toggle-panel js-sub-nav-panel toggle_nav_panel sub_nav_panel">
                                <div class="toggle_nav_panel_close sub_nav_panel_close">
                                    <button class="js-swap toggle_nav_panel_close_button sub_nav_panel_close_button" data-swap-target=".js-sub-nav-group" data-swap-linked="sub">Close</button>
                                </div>
                                <nav class="js-nav-toggle js-sub-nav toggle_nav sub_nav" aria-labelledby="toggle_nav_title-81">
                                    <div class="toggle_nav_header sub_nav_header">
                                        <h2 class="toggle_nav_title sub_nav_title" id="toggle_nav_title-81">nullam dictum felis eu</h2>
                                    </div>
                                    <ul class="js-nav-toggle-list js-sub-nav-list toggle_nav_list sub_nav_list" aria-labelledby="toggle_nav_title-81">
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page_header_bg_media department_page_media">
        <div class="page_header_bg_media_inner">
            <figure class="page_header_bg_figure">

                <img class="page_header_bg_image" srcset="https://images.fastspot.com/vcuarts/1440x810/ 1440w, https://images.fastspot.com/vcuarts/1220x686/ 1220w, https://images.fastspot.com/vcuarts/980x552/ 980w, https://images.fastspot.com/vcuarts/740x416/ 740w, https://images.fastspot.com/vcuarts/500x282/ 500w, https://images.fastspot.com/vcuarts/300x169/ 300w" sizes="(min-width: 980px) 85vw, 100vw" src="https://images.fastspot.com/vcuarts/300x169/" alt="" loading="eager" width="300" height="169">
            </figure>
        </div>
    </div>
</div>
 
{#
	{% include '@partial-page-header--department_detail' with {
		page: page
	} %}
#}

<div class="js-background-video-container page_header">
	<div class="page_intro">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="page_intro_inner">
					<div class="page_intro_meta department_page_intro_meta">
						<div class="page_intro_group">
								<div class="page_breadcrumb">
								{% render '@navigation-breadcrumb' with {
									page: page,
									modifier: '',
									links: page.breadcrumbNav,
									icon_home: '',
									icon_divider: '',
									icon_end: ''
								} %}
							</div>
							<div class="department_page_meta">
								<h1 class="department_page_title" id="page_title" tabindex="-1">
									<span class="department_page_title_prefix">Department of </span>
									<span class="department_page_title_suffix">{{ page.title }}</span>
								</h1>
								<div class="department_page_degree">
									<p class="department_page_degree_title">Degrees Offered</p>
									<p class="department_page_degree_description">{{ page.degree }}</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	{% if page.subNav != false or page.video %}
		<div class="page_subnav">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="page_subnav_inner">
						{% if page.subNav != false %}
							<a class="skip_link skip_subnav" id="skip_sub_link" href="#page_content">Skip Sub Navigation</a>
							<div class="page_nav_flat">
								{% include '@navigation-basic' with {
									class: 'sub',
									modifier: '',
									title: page.title,
									active_index: page.active_index,
									links: page.subNav
								} %}
							</div>
							<div class="page_subnav_toggle">
								<h2 class="page_subnav_toggle_title">In This Section</h2>
								{% include '@navigation-toggle-custom' with {
									class: 'sub',
									modifier: '',
									title: page.title|lower,
									links: page.subNav,
									icon: '',
									child_icon: '',
									toggle: {
										title: 'Select Section',
										icon: 'chevron_down',
										title_active: 'Close',
										icon_active: 'chevron_down',
										swap_target: '.js-sub-nav-group',
										swap_link: 'sub'
									}
								} %}
							</div>
						{% endif %}
						{% if page.video %}
							<div class="page_header_bg_video_controls">
								{% include '@partial-button' with {
									class: 'page_header_bg_video_play',
									title: 'Play Video',
									icon: 'play',
									js: false,
									js_class: 'js-background-video-play'
								} %}
								{% include "@partial-button" with {
									class: 'page_header_bg_video_pause',
									title: 'Pause Video',
									icon: 'pause',
									js: false,
									js_class: 'js-background-video-pause'
								} %}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="page_header_bg_media department_page_media">
		<div class="page_header_bg_media_inner">
			<figure class="page_header_bg_figure">
				{% include '@partial-image' with {
					class: 'page_header_bg',
					alt: page.alt,
					image: page.background,
					loading: 'eager',
					sources: [
						img.wide.xlrg,
						img.wide.lrg,
						img.wide.med,
						img.wide.sml,
						img.wide.xsml,
						img.wide.xxsml
					],
					sizes: [
						'(min-width: 980px) 85vw',
						'100vw'
					]
				} %}
			</figure>
			{% if page.video %}
				{% set video_options = {
					display: "background",
					id: page.video.id,
					type: page.video.type,
					title: page.video.title,
					autoplay: true
				} %}
				<div class="js-background-video-wrapper page_header_bg_video" data-background-video='{{ video_options|json_encode }}'>
					<div class="page_header_bg_video_iframe_wrap">
						<div class="page_header_bg_video_iframe_target js-iframe-target"></div>
					</div>
				</div>
			{% endif %}
		</div>
	</div>
</div>

No notes defined.