OCDE - Pattern Library v1.13.0

Industry Not Used 

<header 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>

    <div class="header header-map">
        <a class="backlink" href="#" aria-label="back to homepage">
            <div class="backlink-x-icon">
                <svg aria-hidden="true">
                    <use xlink:href="#icon-arrowleft"></use>
                </svg>
            </div>
        </a>
        <div class="header-x-text">
            <h2 class="header-x-title">Hospitality, Tourism, and Recreation</h2>
        </div>
    </div>

</header>

<main id="main">

    <div data-dialog="inertcontainer">

        <!-- Document content here -->
        <div class="background background-bubbles l-viewportheight">

            <div class="l-bottombumper  u-hidden-mindesktop">

            </div>

            <div class="l-map u-hidden-maxdesktop">

                <nav class="sidebar sidebar-desktop ">

                    <div class="sidebar-x-options">
                        <div class="brandvoice brandvoice-sidebar">
                            <h3>Hospitality, Tourism, and Recreation</h3>
                        </div>
                        <button class="sidebaroption sidebaroption-is-active" type="button">
                            <span class="sidebaroption-x-title">Child Development or Early Care and Education</span>
                            <span class="sidebaroption-x-body">Provide intellectual, psychosocial, and physical care and development of children.</span>
                        </button>
                        <button class="sidebaroption" type="button">
                            <span class="sidebaroption-x-title">Family and Consumer Sciences, General</span>
                            <span class="sidebaroption-x-body">Balance personal, family and work responsibilities throughout the life cycle.</span>
                        </button>
                        <button class="sidebaroption" type="button">
                            <span class="sidebaroption-x-title">Food Processing and Related Technology</span>
                            <span class="sidebaroption-x-body">Use chemical, physical, and engineering principles to manufacture and distribute food products.</span>
                        </button>
                        <button class="sidebaroption" type="button">
                            <span class="sidebaroption-x-title">Gerontology</span>
                            <span class="sidebaroption-x-body">Work with older adults.</span>
                        </button>
                        <button class="sidebaroption" type="button">
                            <span class="sidebaroption-x-title">Hospitality</span>
                            <span class="sidebaroption-x-body">Organize and administer hospitality services, management, and training of personnel.</span>
                        </button>
                        <button class="sidebaroption" type="button">
                            <span class="sidebaroption-x-title">Natural Resources</span>
                            <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
                        </button>
                        <button class="sidebaroption" type="button">
                            <span class="sidebaroption-x-title">Nutrition, Foods, and Culinary Arts</span>
                            <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
                        </button>
                        <button class="sidebaroption" type="button">
                            <span class="sidebaroption-x-title">Public Relations</span>
                            <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
                        </button>
                    </div>

                </nav>

                <div id="l-map-x-map" class="l-map-x-map">
                    <button class="button button-inverse l-map-x-clearlocationfilter" type="button">Clear Location Filter</button>
                </div>

            </div>

            <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
            <script>
                $('.sidebaroption').click(function() {
                    $('.sidebaroption').removeClass('sidebaroption-is-active');
                    $(this).addClass('sidebaroption-is-active');
                });
            </script>

            <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

            <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

            <script>
                var mainmap = L.map('l-map-x-map', {
                    attributionControl: false
                }).setView([33.6412, -117.9188], 10);
                mainmap.zoomControl.setPosition('bottomright');
                L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                    maxZoom: 18,
                    id: 'mapbox/streets-v11',
                    accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
                }).addTo(mainmap);
                // Create the map marker.
                var icon = L.divIcon({
                    className: 'mapmarker',
                    iconSize: null,
                    iconAnchor: [11, 0],
                });
                // Add the marker to map.
                var marker1 = L.marker([33.6711, -117.9102], {
                    icon: icon
                }).addTo(mainmap);
                var marker2 = L.marker([33.5527184, -117.6659786], {
                    icon: icon
                }).addTo(mainmap);
                var popup1 = L.popup({
                    className: 'mappopup',
                    autoClose: false
                }).setContent('<a href="#">Orange Coast College</a>');
                var popup2 = L.popup({
                    className: 'mappopup',
                    autoClose: false
                }).setContent('<a href="#">Saddleback College</a>');
                // Add a popup to marker
                marker1.bindPopup(popup1).openPopup();
                marker2.bindPopup(popup2).openPopup();
                var group = new L.featureGroup([marker1, marker2]);
                mainmap.fitBounds(group.getBounds().pad(0.5));
            </script>

        </div>

    </div>

    <!-- Dialog content here -->

</main>

<footer class="footer footer-industry l-containerxaxis" data-dialog="inertcontainer" data-menu="inertcontainer">
    <div class="footer-x-sponsors">
        <h3>Sponsors:</h3>
        <ul>
            <li>LAOCRC<span class="footer-x-bullet">&bull;</span></li>
            <li>Strong Workforce</li>
        </ul>
    </div>
    <img src="../../assets/images/footer-logo.svg" alt="California Community Colleges logo" width="272" height="34">
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
    $('.sidebaroption').click(function() {
        $('.sidebaroption').removeClass('sidebaroption-is-active');
        $(this).addClass('sidebaroption-is-active');
    });
</script>
 
<header data-dialog="inertcontainer">

  <h1 class="{{render '@u-visuallyhidden'}}" id="header-document">Program Finder</h1>

  {{render '@quicklinks'}}

  {{render '@header--mapexample'}}

</header>

<main id="main">

  <div data-dialog="inertcontainer">

    <!-- Document content here -->
    <div class="{{render '@background--bubbles'}} {{render '@l-viewportheight'}}">


      <div class="{{render '@l-bottombumper'}} {{render '@u-hidden--mindesktop'}}">
        {{render '@mobilemappane--collegeexample'}}
      </div>

      {{render '@l-map' lMapContext merge=true}}

    </div>

  </div>

  <!-- Dialog content here -->

</main>

<footer class="footer footer-industry {{render '@l-containerxaxis'}}" data-dialog="inertcontainer" data-menu="inertcontainer">
  <div class="footer-x-sponsors">
    <h3>Sponsors:</h3>
    <ul>
      <li>LAOCRC<span class="footer-x-bullet">&bull;</span></li>
      <li>Strong Workforce</li>
    </ul>
  </div>
  <img src="{{path '/assets/images/footer-logo.svg'}}" alt="California Community Colleges logo" width="272" height="34">
</footer>










<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
  $('.sidebaroption').click(function(){
    $('.sidebaroption').removeClass('sidebaroption-is-active');
    $(this).addClass('sidebaroption-is-active');
  });
</script>
 
{
  "bannertitle": "Hospitality, Tourism & Recreation",
  "bannersubtitle": "You like to make people feel at home.",
  "lMapContext": {
    "modifier": "u-hidden-maxdesktop"
  }
}

No notes defined.