Lehigh Clutch Style Guide

Landing Page 

<!--UCPA Emergency Banner Alert-->
                <div id="emergencyalert">
                    <div id="AppArmorAlertID_2"></div>
                    <script type="text/javascript" src="//lehigh.apparmor.com/Notifications/Feeds/Javascript/?AlertID=2" async></script>
                </div>
                <!--End UCPA Emergency Banner Alert-->
                <header class="header">
                    <div class="container-fluid">
                        <div class="row logo-wrapper">
                            <button class="navbar-toggler main-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"><i class="fas fa-bars icon-default"><span class="sr-only">Open menu</span></i><i class="fa fa-times icon-hover"><span class="sr-only"><span>Close menu</span></i></span>
                            </button>
                            <div class="logo">
                                <picture class="image lehigh-logo e11y-ok">
                                    <a href="" class="logo__link">
                                        <img class="web" src="" alt="Lehigh University logo" width="200" height="43" />
                                        <span class="u-a11y-text">Go to homepage</span>
                                    </a>
                                </picture>
                            </div><!-- end logo -->
                            <div class="mobile-search">
                                <button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
                            </div><!-- end mobile-search -->
                        </div>
                    </div>
                    <div class="header-wrapper container-fluid">
                        <div class="row">
                            <div class="col title">
                                <span class="site-title"><a href=""></a></span>
                            </div><!-- title -->
                        </div>
                        <div class="navigation-wrapper">
                        </div><!-- end navigation-wrapper -->
                    </div><!-- end header-wrapper -->
                </header>

                <main class="d-print-block accent-">
                    <a id="main-content" tabindex="-1"></a>

                    <div class="hero-wrapper_banner" style="background-image: url('/img/lupanoramaoct-2022-3.png');"></div>

                    <div class="container-fluid">
                        <div class="row justify-content-center">
                            <div class="content-top col-12 col-print-12 ">
                                <h1 class="page-title">This is a really really really long title</h1>
                                <nav aria-label="breadcrumb">
                                    <h2 id="system-breadcrumb" class="sr-only">Breadcrumb</h2>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item active"><a href="#">Home</a></li>
                                        <li class="breadcrumb-item">Landing Page</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>

                    </div>

                    <div class="container-fluid">

                        <div class="row">

                            <section class="main-content col-sm-12 col-md-8 col-lg-9 col-xl-9 col-print-12">
                                <article>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus nullam eget felis eget nunc. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Turpis egestas sed tempus urna et pharetra pharetra massa massa. Vulputate dignissim suspendisse in est ante in. Lorem ipsum dolor sit amet. Quis viverra nibh cras pulvinar. Mauris ultrices eros in cursus turpis massa. Nisl suscipit adipiscing bibendum est ultricies integer. Sit amet facilisis magna etiam tempor orci eu lobortis. Urna et pharetra pharetra massa massa ultricies mi quis.</p>
                                    <h2>Heading 2</h2>
                                    <p>Eu mi bibendum neque egestas congue quisque egestas. Pretium fusce id velit ut tortor pretium viverra suspendisse. Tempus egestas sed sed risus pretium quam vulputate. Malesuada fames ac turpis egestas integer eget aliquet nibh. Venenatis cras sed felis eget. Quam vulputate dignissim suspendisse in. Quisque sagittis purus sit amet. Bibendum ut tristique et egestas quis ipsum. Non enim praesent elementum facilisis leo vel. Sed id semper risus in hendrerit gravida rutrum quisque non. Semper viverra nam libero justo laoreet sit amet. Nunc vel risus commodo viverra. Porttitor eget dolor morbi non arcu risus quis varius. Sed enim ut sem viverra aliquet. Augue mauris augue neque gravida in fermentum et. Tellus pellentesque eu tincidunt tortor. Dignissim diam quis enim lobortis scelerisque fermentum.</p>
                                    <p>Nunc pulvinar sapien et ligula ullamcorper malesuada. Fermentum posuere urna nec tincidunt praesent. Fermentum iaculis eu non diam phasellus vestibulum lorem. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Posuere sollicitudin aliquam ultrices sagittis. Pellentesque sit amet porttitor eget dolor. Nunc id cursus metus aliquam eleifend mi in. Vel quam elementum pulvinar etiam non. Scelerisque in dictum non consectetur a erat. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Est ultricies integer quis auctor. Commodo viverra maecenas accumsan lacus. Viverra nibh cras pulvinar mattis nunc sed blandit. Nisl vel pretium lectus quam id leo in vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Consectetur lorem donec massa sapien. Sed ullamcorper morbi tincidunt ornare massa.</p>
                                    <section class="office-list">
                                        <div class="office-card">
                                            <a href="" class="office-card_link">
                                                <h3>Office Name 1</h3>
                                            </a>
                                            <p>Office Location</p>
                                        </div>
                                        <div class="office-card">
                                            <a href="" class="office-card_link">
                                                <h3>Office Name 2</h3>
                                            </a>
                                            <p>Office Location</p>
                                        </div>
                                        <div class="office-card">
                                            <a href="" class="office-card_link">
                                                <h3>Office Name 3</h3>
                                            </a>
                                            <p>Office Location</p>
                                        </div>
                                        <div class="office-card">
                                            <a href="" class="office-card_link">
                                                <h3>Office Name 4</h3>
                                            </a>
                                            <p>Office Location</p>
                                        </div>
                                    </section>
                                </article>
                            </section>

                            <section class="right-content col-sm-12 col-md-4 col-lg-3 col-xl-3 col-print-12">
                                <div class="sidebar_callout">
                                    <h2>Title</h2>
                                    <p>Lorem ipsum dolor sit amet <a href="#">consectetur</a> adipiscing elit. </p>
                                    <div class="btn_wrapper">
                                        <a href="#" class="btn btn-primary gold" role="button">
                                            <span class="button_text">Action Button</span>
                                            <span class="arrow fal fa-chevron-right"></span>
                                        </a>
                                    </div>
                                </div><!-- end sidebar_callout -->
                                <div class="news-list">
                                    <div class="sidebar-news-item">
                                        <h3><a href="#">This is the News title</a></h3>
                                        <p class="sidebar-news-dates">January 28, 2021</p>
                                    </div><!-- end sidebar-news-item -->
                                    <div class="sidebar-news-item">
                                        <h3><a href="#">This is the News title</a></h3>
                                        <p class="sidebar-news-dates">January 10, 2021</p>
                                    </div><!-- end sidebar-news-item -->
                                    <div class="sidebar-news-item">
                                        <h3><a href="#">This is the News title</a></h3>
                                        <p class="sidebar-news-dates">December 23, 2020</p>
                                    </div><!-- end sidebar-news-item -->
                                </div><!-- end news-list -->
                            </section>

                        </div><!-- end row -->
                    </div><!-- end container-fluid -->
                </main>

                <section id="department_footer">
                    <!-- region for footer-center or footer-main -->
                    <footer class="footer-wrapper">
                        <!-- Single Block styled as department footer -->

                        <h2>Lehigh's New theme- clutch</h2>
                        <ul class="social-media">

                        </ul>

                        <ul class="contact-info">
                        </ul>

                    </footer>
                </section>
                <footer id="site_footer">
                    <div class="footer-wrapper">
                        <div class="logo" role="logo">
                            <picture class="image lehigh-logo e11y-ok">
                                <a href="" class="logo__link">
                                    <img class="web" src="/img/lehigh-logo.svg" alt="Lehigh University logo" width="200" height="43" />
                                    <span class="u-a11y-text">Go to homepage</span>
                                </a>
                            </picture>
                        </div><!-- end logo -->
                        <div class="lehigh-contact">
                            <address>27 Memorial Drive West<br />
                                Bethlehem, PA 18015, USA</address>
                            <span class="phone"><a href="tel:610-758-3000">610-758-3000</a></span>
                        </div>
                        <div class="copyright">
                            <p>&copy; <script>
                                    document.write(new Date().getFullYear());
                                </script> Lehigh University. <a href="http://www1.lehigh.edu/about/copyright?footer">All Rights Reserved</a>.
                                <a href="http://www1.lehigh.edu/about/privacy?footer">Privacy</a>. <a href="http://www1.lehigh.edu/about/serviceagreement?footer">Terms</a>
                            </p>
                        </div><!-- end copyright -->
                        <div class="common-links">
                            <ul>
                                <li><a href="http://www1.lehigh.edu/insidelehigh?footer">Inside Lehigh</a></li>
                                <li><a href="http://www.lehigh.edu/~www/directory/?footer">Directory</a></li>
                                <li><a href="http://www1.lehigh.edu/about/maps?footer">Maps</a></li>
                                <li><a href="http://www1.lehigh.edu/contactlehigh">Contact</a></li>
                                <li><a href="http://www1.lehigh.edu/emergency">Emergency Info</a></li>
                                <li><a href="http://www1.lehigh.edu/about/mobilefriendly?footer">Mobile Friendly</a></li>
                                <li><a href="http://www.lehigh.edu/~inprv/heoa/index.html">Higher Education Opportunity Act</a></li>
                                <li><a href="http://www.lehigh.edu/principlesequity?footer">Equitable Community</a></li>
                                <li><a href="http://www.lehigh.edu/nondiscrimination?footer">Non-Discrimination</a></li>
                            </ul>
                        </div><!-- end common-links -->
                    </div>
                </footer>
 
{% extends '@base_layout' %}

{% block region_highlight %}
  {% include "@hero_image--top_banner" %}
{% endblock region_highlight %}

{% block region_main %}
  <article>
    {{ page_content }}
    {% include "@office_list" with {
      offices: office_list.offices
    } %}
  </article>
{% endblock region_main %}

{% if has_sidebar|default %}
  <section class="right-content {{ region_sidebar_classes }}">
    {% block region_sidebar %}
      {% include "@side_callout" with {
        title: side_callout.title,
        body: side_callout.body,
        buttons: side_callout.buttons
      } %}
      {% include "@side_news" with {
        title: side_news.title,
        news_listings: side_news.news_listings
      } %}
    {% endblock region_sidebar %}
  </section>
{% endif %}
{% render "@header" %}

{% block footer %}
{% render "@footer_option_1" %}
{% endblock footer %}
 
{
  "has_sidebar": true,
  "has_breadcrumb": false,
  "hero_src_img": "/img/lupanoramaoct-2022-3.png",
  "hero_heading": "This is the Heading",
  "hero_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus. Donec ac odio tempor orci dapibus ultrices in iaculis nunc.",
  "align_text": "right",
  "page_header": "This is a really really really long title",
  "bread_items": {
    "1": {
      "text": "Home",
      "url": "#"
    },
    "2": {
      "text": "Landing Page",
      "url": ""
    }
  },
  "page_content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus nullam eget felis eget nunc. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Turpis egestas sed tempus urna et pharetra pharetra massa massa. Vulputate dignissim suspendisse in est ante in. Lorem ipsum dolor sit amet. Quis viverra nibh cras pulvinar. Mauris ultrices eros in cursus turpis massa. Nisl suscipit adipiscing bibendum est ultricies integer. Sit amet facilisis magna etiam tempor orci eu lobortis. Urna et pharetra pharetra massa massa ultricies mi quis.</p> <h2>Heading 2</h2> <p>Eu mi bibendum neque egestas congue quisque egestas. Pretium fusce id velit ut tortor pretium viverra suspendisse. Tempus egestas sed sed risus pretium quam vulputate. Malesuada fames ac turpis egestas integer eget aliquet nibh. Venenatis cras sed felis eget. Quam vulputate dignissim suspendisse in. Quisque sagittis purus sit amet. Bibendum ut tristique et egestas quis ipsum. Non enim praesent elementum facilisis leo vel. Sed id semper risus in hendrerit gravida rutrum quisque non. Semper viverra nam libero justo laoreet sit amet. Nunc vel risus commodo viverra. Porttitor eget dolor morbi non arcu risus quis varius. Sed enim ut sem viverra aliquet. Augue mauris augue neque gravida in fermentum et. Tellus pellentesque eu tincidunt tortor. Dignissim diam quis enim lobortis scelerisque fermentum.</p> <p>Nunc pulvinar sapien et ligula ullamcorper malesuada. Fermentum posuere urna nec tincidunt praesent. Fermentum iaculis eu non diam phasellus vestibulum lorem. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Posuere sollicitudin aliquam ultrices sagittis. Pellentesque sit amet porttitor eget dolor. Nunc id cursus metus aliquam eleifend mi in. Vel quam elementum pulvinar etiam non. Scelerisque in dictum non consectetur a erat. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Est ultricies integer quis auctor. Commodo viverra maecenas accumsan lacus. Viverra nibh cras pulvinar mattis nunc sed blandit. Nisl vel pretium lectus quam id leo in vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Consectetur lorem donec massa sapien. Sed ullamcorper morbi tincidunt ornare massa.</p>",
  "office_list": {
    "offices": {
      "1": {
        "office_title": "Office Name 1",
        "office_details": "Office Location"
      },
      "2": {
        "office_title": "Office Name 2",
        "office_details": "Office Location"
      },
      "3": {
        "office_title": "Office Name 3",
        "office_details": "Office Location"
      },
      "4": {
        "office_title": "Office Name 4",
        "office_details": "Office Location"
      }
    }
  },
  "side_callout": {
    "title": "Title",
    "body": "Lorem ipsum dolor sit amet <a href=\"#\">consectetur</a> adipiscing elit. ",
    "buttons": {
      "1": {
        "text": "Action Button",
        "url": "#",
        "color": "gold"
      }
    }
  },
  "side_news": {
    "title": "WMS News",
    "news_listings": {
      "1": {
        "title": "This is the News title",
        "url": "#",
        "date": "January 28, 2021"
      },
      "2": {
        "title": "This is the News title",
        "url": "#",
        "date": "January 10, 2021"
      },
      "3": {
        "title": "This is the News title",
        "url": "#",
        "date": "December 23, 2020"
      }
    }
  }
}

This shows what a typical landing page. Landing pages are used for major section’s “homepage”.