<header aria-labelledby="header-banner" data-dialog="inertcontainer">
<h1 class="u-visuallyhidden" id="header-document">Program Finder</h1>
<nav class="quicklinks" aria-label="quicklinks" data-menu="inertcontainer">
<a href="#main">Go to page content</a>
</nav>
<h2 class="u-visuallyhidden" id="header-banner">Header</h2>
<div class="header l-containerxaxis">
<a href="#">
<svg>
<use xlink:href="#icon-logo"></use>
</svg>
</a>
</div>
</header>
<main id="main">
<div data-dialog="inertcontainer">
<header class="banner banner-home l-containerxaxis">
<div class="banner-x-text">
<h2>Welcome</h2>
<div class="banner-x-textbottom">
<h3>Connecting Orange County High Schools with Community Colleges.</h3>
<div class="banner-x-search">
<form>
<div class="forminput forminput-iconbutton">
<label class="forminput-x-label u-visuallyhidden" for="input">Search</label>
<div class="forminput-x-input">
<input type="text" name="input" id="input" placeholder="Search for programs or jobs of interest...">
<button class="forminput-x-button" type="submit" aria-label="submit search">
<svg>
<use xlink:href="#icon-search"></use>
</svg>
</button>
</div>
<p class="forminput-x-error" style="display: none;">Error Message.</p>
</div>
</form>
</div>
</div>
</div>
<div class="banner-x-left-triangle">
<svg>
<use xlink:href="#banner-left-triangle"></use>
</svg>
</div>
<div class="banner-x-right-triangle">
<svg>
<use xlink:href="#banner-right-triangle"></use>
</svg>
</div>
</header>
<div class="background background-light1">
<div class="l-grid">
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-agriculture" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/agriculture.jpg" alt="Agriculture">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-agriculture"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Agriculture & Natural Resources</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-arts" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/arts.jpg" alt="Arts">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-arts"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Arts, Media & Entertainment</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-construction" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/construction.jpg" alt="Construction">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-construction"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Building & Construction Trades</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-education" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/education.jpg" alt="Education">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-education"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Education Child Development & Family Services</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-energy" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/energy.jpg" alt="Energy">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-energy"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Energy, Environment & Utilities</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-engineering" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/engineering.jpg" alt="Engineering">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-engineering"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Engineering & Architecture</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-fashion" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/fashion.jpg" alt="Fashion">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-fashion"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Fashion & Interior Design</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-communication" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/communication.jpg" alt="Communication">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-communication"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Information & Communication Technologies</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-business" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/business.jpg" alt="Business">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-business"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Business & Finance</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-hospitality" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/hospitality.jpg" alt="Hospitality">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-hospitality"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Hospitality, Tourism & Recreation</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-health" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/health.jpg" alt="Health">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-health"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Health Science & Medical Technology</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-manufacturing" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/manufacturing.jpg" alt="Manufacturing">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-manufacturing"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Manufacturing & Product Development</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-transportation" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/transportation.jpg" alt="Transportation">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-transportation"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Transportation</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-publicservices" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/publicservices.jpg" alt="Public Services">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-publicservices"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Public Services</span>
</div>
</a>
</div>
<div class="l-grid-x-griditem">
<a class="cardimage cardimage-sales" href="#">
<div class="cardimage-x-top">
<img src="../../assets/images/sales.jpg" alt="Sales">
<svg class="cardimage-x-icon">
<use xlink:href="#cardimageicon-sales"></use>
</svg>
</div>
<div class="cardimage-x-bottom">
<span class="cardimage-x-text">Marketing, Sales & Service</span>
</div>
</a>
</div>
</div>
<div class="l-containerxaxis u-padding-bottom3x">Program Finder was designed to connect students in California K-12 Career Technical Education (CTE) Pathways to Community College Career Education Pathways (i.e. CTE TOP Coded programs), while also providing CTE college faculty and employers with a quick and easy way to find related programs and make important connections for collaboration. The platform was developed through a California Community College Strong Workforce Project sponsored by Cypress College on behalf of the Orange County Regional Consortium and in collaboration with the Orange County Department of Education. Program Finder’s industry sectors align with the California Department of Education CTE Framework, and these sectors have been matched to the California Community College Career Education Programs through a database-driven crosswalk developed by Concentric Sky.</div>
</div>
</div>
<!-- Dialog content here -->
</main>
<footer class="footer l-containerxaxis" data-dialog="inertcontainer" data-menu="inertcontainer">
<div class="footer-x-inner">
<div class="footer-x-leftcol">
<div class="footer-x-sponsors">
<span class="footer-x-sponsorslabel">Sponsors:</span>
<span>LAOCRC</span>
<span class="footer-x-bullet">•</span>
<span>Orange County Regional Consortia</span>
</div>
<ul>
<li>
<a href="#">Site Map</a>
</li>
<li>
<a href="#">Local Administrative Control Login</a>
</li>
<li>
<a href="#">Report a Problem</a>
</li>
<li>
Want to see your region in Program Finder? <a href="#">Contact us</a>
</li>
<li>
<a href="#">Resources</a>
</li>
</ul>
</div>
<div class="footer-x-rightcol">
<img src="../../assets/images/footer-logo.svg" alt="California Community Colleges logo" width="272" height="34">
</div>
</div>
</footer>
<header aria-labelledby="header-banner" data-dialog="inertcontainer">
<h1 class="{{render '@u-visuallyhidden'}}" id="header-document">Program Finder</h1>
{{render '@quicklinks'}}
<h2 class="{{render '@u-visuallyhidden'}}" id="header-banner">Header</h2>
<div class="header l-containerxaxis">
<a href="#">
<svg><use xlink:href="#icon-logo"></use></svg>
</a>
</div>
</header>
<main id="main">
<div data-dialog="inertcontainer">
{{render '@banner--homeexample'}}
<div class="background background-light1">
{{render '@l-grid'}}
<div class="l-containerxaxis u-padding-bottom3x">Program Finder was designed to connect students in California K-12 Career Technical Education (CTE) Pathways to Community College Career Education Pathways (i.e. CTE TOP Coded programs), while also providing CTE college faculty and employers with a quick and easy way to find related programs and make important connections for collaboration. The platform was developed through a California Community College Strong Workforce Project sponsored by Cypress College on behalf of the Orange County Regional Consortium and in collaboration with the Orange County Department of Education. Program Finder’s industry sectors align with the California Department of Education CTE Framework, and these sectors have been matched to the California Community College Career Education Programs through a database-driven crosswalk developed by Concentric Sky.</div>
</div>
</div>
<!-- Dialog content here -->
</main>
{{render '@footer'}}
/* No context defined. */
No notes defined.