<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="template-home.html">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_icon" aria-hidden="true">
<svg class="icon icon_home">
<use href="/images/icons.svg#home" />
</svg>
</span>
<span class="breadcrumb_pill_label">Home</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_dot">
<use href="/images/icons.svg#dot" />
</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">Navigation Level</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_dot">
<use href="/images/icons.svg#dot" />
</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">Parent Level</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_dot">
<use href="/images/icons.svg#dot" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label"></span>
</span>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="page_header_media">
<div class="page_header_media_inner">
<figure class="page_header_figure" aria-label=" Featured Image">
<img class="page_header_image" srcset="https://images.fastspot.com/columbia-gorge-community-college/1440x810/1 1440w, https://images.fastspot.com/columbia-gorge-community-college/1220x686/1 1220w, https://images.fastspot.com/columbia-gorge-community-college/980x552/1 980w, https://images.fastspot.com/columbia-gorge-community-college/740x416/1 740w, https://images.fastspot.com/columbia-gorge-community-college/500x282/1 500w, https://images.fastspot.com/columbia-gorge-community-college/300x169/1 300w" src="https://images.fastspot.com/columbia-gorge-community-college/300x169/1" alt="" loading="eager" width="300" height="169">
</figure>
<div class="inline_video js-video-replace" data-video-id="306272054" data-video-type="vimeo" data-video-title="Video Title">
<button type="button" class="inline_video_toggle_btn js-toggle-btn" aria-label="Video Play Button">
<svg class="icon icon_play_gradient">
<use href="/images/icons.svg#play_gradient" />
</svg>
</button>
<div class="inline_video_iframe_wrap js-iframe"></div>
</div>
</div>
</div>
<div class="page_nav">
<div class="fs-row">
<div class="fs-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">
<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">
<span class="sub_nav_toggle_icon_inner_default sub_nav_toggle_icon_inner">
<span class="sub_nav_toggle_icon_space"></span>
<svg class="icon icon_angle_down">
<use href="/images/icons.svg#angle_down" />
</svg>
</span>
</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">
<span class="sub_nav_toggle_icon_inner_active sub_nav_toggle_icon_inner">
<span class="sub_nav_toggle_icon_space"></span>
<svg class="icon icon_angle_up">
<use href="/images/icons.svg#angle_up" />
</svg>
</span>
</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_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="sub_nav_link_label">Leadership</span>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<span class="sub_nav_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="sub_nav_link_label">Consumer Information</span>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<span class="sub_nav_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="sub_nav_link_label">History</span>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<span class="sub_nav_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="sub_nav_link_label">Policies & Procedures</span>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<span class="sub_nav_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="sub_nav_link_label">Campus Directory</span>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<span class="sub_nav_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="sub_nav_link_label">A-Z Directory</span>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<span class="sub_nav_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="sub_nav_link_label">Careers</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{#
{% include '@partial-page-header' with {
page: page
} %}
#}
<div class="page_header">
<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: 'home',
icon_divider: 'dot',
} %}
</div>
</div>
</div>
</div>
{% endif %}
{% if page.title or page.description %}
<div class="page_intro">
<div class="fs-row fs-lg-justify-center">
<div class="fs-cell fs-lg-10 fs-xl-9">
<div class="page_intro_inner">
{% if page.title %}
<h1 class="page_title" id="page_title" tabindex="-1">{{ page.title }}</h1>
{% endif %}
{% if page.description %}
<p class="page_description">{{ page.description }}</p>
{% endif %}
</div>
</div>
</div>
</div>
{% 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">
<div class="page_header_media_inner">
{% if page.image %}
{% set crop_type = page.video ? "wide" : "ultrawide" %}
<figure class="page_header_figure" aria-label="{{ page.title|e('html_attr') }} Featured Image">
{% include '@partial-image' with {
class: 'page_header',
alt: '',
image: page.image,
loading: 'eager',
sources: [
img[crop_type].xlrg,
img[crop_type].lrg,
img[crop_type].med,
img[crop_type].sml,
img[crop_type].xsml,
img[crop_type].xxsml
]
} %}
</figure>
{% endif %}
{% if page.video %}
<div class="inline_video js-video-replace" data-video-id="{{ page.video.id }}" data-video-type="{{ page.video.type }}" data-video-title="{{ page.video.title|default("") }}">
<button type="button" class="inline_video_toggle_btn js-toggle-btn" aria-label="Video Play Button">
{{ icon('play_gradient') }}
</button>
<div class="inline_video_iframe_wrap js-iframe"></div>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if page.subNav != false %}
<div class="page_nav">
<div class="fs-row">
<div class="fs-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,
icon: 'angle_down'
} %}
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
No notes defined.