<style>
html:root {
--accent_color: #502d0e;
}
</style>
<!--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="/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="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="">Site Name</a><span class="site-slogan">Site Slogan</span></span>
</div><!-- title -->
</div>
<div class="navigation-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="searchbox">
<form class="form-inline my-2 my-lg-0 main-search">
<button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
<div class="search-container input-group ">
<input class="form-control border-right-0 border" type="search" placeholder="Search" aria-label="Search">
<div class="search_buttons_wrapper">
<span class="input-group-append">
<button data-drupal-selector="edit-submit" id="edit-submit" class="btn btn-outline-info border-left-0 border-right-0 border js-form-submit form-submit" type="submit"><i class="fas fa-search"></i><span class="sr-only">Search</span></button>
</span>
<span class="input-group-append close_search">
<button class="btn btn-outline-danger border-left-0 border" type="button"><i class="fa fa-times"></i><span class="sr-only">Close the search box</span></button>
</span>
</div><!-- end search_buttons_wrapper -->
</div>
</form>
</div>
<div class="collapse navbar-collapse navbar-wrapper nav-wrapper container-fluid not_here" id="navbarSupportedContent">
<div class="col-lg-9 main_nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<div class="button-wrapper">
<a class="nav-link dropdown-toggle" href="#">Pages</a>
<button class="show-menu" id="Pages_dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i><span class="sr-only">Show menu</span></button>
<div class="dropdown-menu" aria-labelledby="Pages_dropdown">
<div class="dropdown_category">
<h2><a href="">Group 1</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 2</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
<li>
<a href="#">Subpage 4</a>
</li>
<li>
<a href="#">Subpage 5</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 3</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 2</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category buttons">
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 1</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 2</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 3</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 4</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<div class="button-wrapper">
<a class="nav-link dropdown-toggle" href="#">Content Sections</a>
<button class="show-menu" id="Content Sections_dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i><span class="sr-only">Show menu</span></button>
<div class="dropdown-menu" aria-labelledby="Content Sections_dropdown">
<div class="dropdown_category">
<h2><a href="">Group 1</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 2</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
<li>
<a href="#">Subpage 4</a>
</li>
<li>
<a href="#">Subpage 5</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 3</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 2</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category buttons">
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 1</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 2</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 3</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 4</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">People</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Photo Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Quote</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Secure Documents List</a>
</li>
<li class="nav-item dropdown">
<div class="button-wrapper">
<a class="nav-link dropdown-toggle" href="#">Statistics</a>
<button class="show-menu" id="Statistics_dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i><span class="sr-only">Show menu</span></button>
<div class="dropdown-menu" aria-labelledby="Statistics_dropdown">
<div class="dropdown_category">
<h2><a href="">Group 1</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 2</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
<li>
<a href="#">Subpage 4</a>
</li>
<li>
<a href="#">Subpage 5</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 3</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 2</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category buttons">
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 1</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 2</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 3</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 4</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 10</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 11</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 12</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 13</a>
</li>
<div id="more">
<button type="button" id="more-label">More <i class="fas fa-plus"></i><span class="sr-only">Show more menu items</span></button>
<div id="overflow">
</div>
</div>
</ul>
</div><!-- end main_nav -->
<div class="col-lg-3 utility_nav not_here">
<nav class="navbar navbar-expand-utility navbar-expand navbar-light bg-light">
<div class="ut_wrapper">
<button class="navbar-toggler quick-link-btn" type="button" data-toggle="collapse" data-target="#utility_nav_ut" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Quick Link">
<span class="navbar-toggler-icon">Quick Links <i class="fas fa-chevron-down"></i></span>
</button>
</div>
<div class="ut_nav">
<ul class="navbar-nav navbar-collapse mr-auto utility_nav_ut collapse" id="utility_nav_ut">
<li class="nav-item">
<a class="nav-link" href=""></a>
</li>
</ul>
</div>
</nav>
</div><!-- end utility_nav -->
</div><!-- end navigation-wrapper -->
</nav>
</div><!-- end navigation-wrapper -->
</div><!-- end header-wrapper -->
</header>
<main class="d-print-block accent-lehigh_brown">
<a id="main-content" tabindex="-1"></a>
<div class="alert alert-success" role="alert">
This is a SUCCESS alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
<div class="alert-wrapper">
<i class="fas fa-exclamation-triangle"></i><span class="sr-only">exclamation for alert</span>
This is a DANGER alert—check it out!
</div>
</div>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="content-top col-12 col-print-12 ">
<h1 class="page-title">Base Layout</h1>
<nav aria-label="breadcrumb">
<h2 id="system-breadcrumb" class="sr-only">Breadcrumb</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item active"><a href="#">Active Link 1</a></li>
<li class="breadcrumb-item active"><a href="#">Active Link 2</a></li>
<li class="breadcrumb-item">Current Page</li>
</ol>
</nav>
</div>
</div>
<div class="page_navigation">
<ul class="nav local_nav">
</ul>
</div><!-- page_navigation -->
<div class="quick_buttons">
<ul>
<li><a href="#"><span class="icon fas fa-question"></span><span>FAQ</span></a></li>
<li><a href="#"><span class="icon far fa-file-alt"></span><span>Documentation</span></a></li>
<li><a href="#"><span class="icon fas fa-phone"></span><span>Contact Us</span></a></li>
</ul>
</div><!-- end quick_buttons -->
</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">
<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. <a href='#'>Pellentesque sit amet porttitor eget dolor</a>. 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>
<p>Leo urna molestie at elementum eu facilisis sed odio. <a href='#'>Facilisi cras fermentum odio</a> eu feugiat pretium nibh ipsum. Nulla malesuada pellentesque elit eget gravida. Elit sed vulputate mi sit. Enim ut tellus elementum sagittis vitae et leo. In nisl nisi scelerisque eu. Interdum varius sit amet mattis vulputate. Feugiat vivamus at augue eget arcu dictum. Scelerisque eleifend donec pretium vulputate sapien. Netus et malesuada fames ac turpis egestas integer. Commodo elit at imperdiet dui accumsan sit amet. Aliquet sagittis id consectetur purus ut faucibus. Velit dignissim sodales ut eu sem integer vitae. Rutrum tellus pellentesque eu tincidunt.</p>
<p>Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Eget magna fermentum iaculis eu. Elit sed vulputate mi sit amet mauris commodo quis. Elit at imperdiet dui accumsan sit amet. Quisque id diam vel quam elementum. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Purus sit amet volutpat consequat mauris nunc. Dolor sit amet consectetur adipiscing. Viverra nibh cras pulvinar mattis nunc. Est placerat in egestas erat. Non pulvinar neque laoreet suspendisse interdum consectetur. Faucibus ornare suspendisse sed nisi lacus sed viverra. Elit ut aliquam purus sit amet luctus venenatis lectus. Odio morbi quis commodo odio. Tincidunt id aliquet risus feugiat in ante metus. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Nisi quis eleifend quam adipiscing. Interdum velit laoreet id donec ultrices tincidunt arcu non.</p>
</section>
<section class="right-content col-sm-12 col-md-4 col-lg-3 col-xl-3 col-print-12">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="navbar-wrapper" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto flex-column side_nav">
<li class="nav-item dropdown">
<div class="button-wrapper">
<a class="nav-link dropdown-toggle" href="#">Page 1</a>
<button class="show-menu" id="Page 1_dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i><span class="sr-only">Show menu</span></button>
<div class="dropdown-menu" aria-labelledby="Page 1_dropdown">
<div class="dropdown_category">
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
<li>
<a href="#">Subpage 4</a>
</li>
<li>
<a href="#">Subpage 5</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 5</a>
</li>
</ul>
</div>
</nav>
<div class="sidebar_callout">
<h2>This is the title</h2>
<p>This the body <a href="#">link</a>.</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 -->
<div class="sidebar_events-list">
<div class="events-item">
<div class="events-details">
<h3><a href="#">Event Title</a></h3>
<p class="events-dates">January 28, 2021</p>
</div>
<div class="event-img"><img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div>
</div><!-- end sidebar_events_item -->
<div class="events-item">
<div class="events-details">
<h3><a href="#">Event Title</a></h3>
<p class="events-dates">January 10, 2021</p>
</div>
<div class="event-img"><img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div>
</div><!-- end sidebar_events_item -->
<div class="events-item">
<div class="events-details">
<h3><a href="#">Event Title</a></h3>
<p class="events-dates">December 23, 2020</p>
</div>
<div class="event-img"><img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div>
</div><!-- end sidebar_events_item -->
</div><!-- end sidebar_events-list -->
<section class="business_card">
<h2>Title of Card</h2>
<h3>Person Name</h3>
<div class="contact_info">
<div class="contact">
</div><!-- end contact -->
</div><!-- end contact_info -->
</section>
</section>
</div><!-- end row -->
</div><!-- end container-fluid -->
</main>
<footer id="site_footer">
<div class="footer_wrapper">
<div class="row">
<script src="/files/lehigh_footer-clutch-min.js"></script>
<!-- region for footer-main -->
<section class="department_footer">
<!-- Single block styled as department footer -->
<h2>Lehigh's New theme- clutch</h2>
<ul class="social-media">
</ul>
<ul class="contact-info">
<li>
<i class="fas fa-phone"></i>
<span class="sr-only">Phone Number</span>
<span>(610) 758 4025</span>
</li>
<li>
<a href="https://www.google.com/maps/@40.6078606,-75.379379,19z" target="_blank">
<i class="fas fa-map-marker-alt"></i>
<span class="sr-only">Address</span>
<address>19 Memorial Drive W.<br /> Lehigh University<br /> Bethlehem, PA<br /> 18015</address>
</a>
</li>
<li>
<a href="mailto:email@lehigh.edu">
<i class="fas fa-envelope"></i>
<span class="sr-only">Email address</span>
email@lehigh.edu
</a>
</li>
</ul>
</section>
<!-- endregion for footer-main -->
<!-- region for footer-group -->
<!-- endregion for footer-group -->
</div>
<div class="row">
<div class="dark-toggle">
<div class="moon">
<span class="sr-only">Dark mode toggle on and off switch</span>
</div>
</div>
</div>
</div>
</footer>
{% set has_sidebar = has_sidebar is defined ? has_sidebar : false %}
{% if has_sidebar %}
{% set title_classes = title_classes is defined ? title_classes : 'col-12 col-print-12' %}
{% set region_main_classes = region_main_classes is defined ? region_main_classes : 'col-sm-12 col-md-8 col-lg-9 col-xl-9 col-print-12' %}
{% set region_sidebar_classes = region_sidebar_classes is defined ? region_sidebar_classes : 'col-sm-12 col-md-4 col-lg-3 col-xl-3 col-print-12' %}
{% set region_main_row_classes = region_main_row_classes is defined ? region_main_row_classes : '' %}
{% endif %}
{% set title_classes = title_classes is defined ? title_classes : 'col-12 col-md-9 col-print-12' %}
{% set region_main_classes = region_main_classes is defined ? region_main_classes : 'col-12 col-print-12' %}
{% set region_main_row_classes = region_main_row_classes is defined ? region_main_row_classes : ' justify-content-center' %}
{% set has_alert = has_alert is defined ? has_alert : false %}
{{ accent_code }}
{% block header %}
{% include "@header" with header %}
{% endblock header %}
<main class="d-print-block accent-{{ accent_color }}">
<a id="main-content" tabindex="-1"></a>
{% if has_alert|default %}
{% for alert in alerts %}
{% include "@alerts" with {
type: alert.type,
fa_icons: alert.fa_icons,
message: alert.message
} %}
{% endfor %}
{% endif %}
{% block region_section_header %}
{% endblock region_section_header %}
{% block region_highlight %}
{% endblock region_highlight %}
<div class="container-fluid">
{% block breadtitle %}
{% include "@content_top" with {
layout_classes: title_classes
} %}
{% endblock breadtitle %}
{% if has_page_navigation|default %}
<div class="page_navigation">
{% include "@local_navigation" with {
nav_items: local_nav.nav_items
} %}
</div><!-- page_navigation -->
{% endif %}
{% if has_quick_buttons|default %}
{% block quick_buttons %}
<div class="quick_buttons">
<ul>
{% for quick_button in quick_buttons %}
<li><a href="{{ quick_button.url }}"><span class="icon {{ quick_button.fa_class }}"></span><span>{{ quick_button.link_text }}</span></a></li>
{% endfor %}
</ul>
</div><!-- end quick_buttons -->
{% endblock quick_buttons %}
{% endif %}
</div>
<div class="container-fluid">
<div class="row{{ region_main_row_classes }}">
<section class="main-content {{ region_main_classes }}">
{% block region_main %}
{{ page_content }}
{{ page_content_2 }}
{% endblock region_main %}
</section>
{% if has_sidebar|default %}
<section class="right-content {{ region_sidebar_classes }}">
{% block region_sidebar %}
{% if side_nav_items %}
{% include "@side_navigation" %}
{% endif %}
{% if side_event_register %}
<div class="side_register">
{% for button in side_event_register.buttons %}
{% include "@a_tag" with button only %}
{% endfor %}
</div>
{% endif %}
{% if side_callout %}
{% include "@side_callout" with {
title: side_callout.title,
body: side_callout.body,
buttons: side_callout.buttons
} %}
{% endif %}
{% if side_news %}
{% include "@side_news" with {
title: side_news.title,
news_listings: side_news.news_listings
} %}
{% endif %}
{% if side_events %}
{% include "@side_events" with {
title: side_events.title,
events_listings: side_events.events_listings
} %}
{% endif %}
{% if side_question %}
{% include "@side_question" %}
{% endif %}
{% if side_business_card %}
{% include "@business_card" with {
card_title: side_business_card.card_title,
person_name: side_business_card.person_name,
fa_icons: side_business_card.fa_icons
} %}
{% endif %}
{% endblock region_sidebar %}
</section>
{% endif %}
</div><!-- end row -->
</div><!-- end container-fluid -->
</main>
{% block footer %}
{# TODO #}
{% include "@footer_option_2" with footer %}
{% endblock footer %}
{% block modal_container %}
{% endblock modal_container %}
{
"has_sidebar": true,
"has_breadcrumbs": true,
"has_page_navigation": true,
"has_quick_buttons": true,
"has_alert": true,
"header": {
"site_name": "Site Name",
"site_slogan": "Site Slogan",
"site_logo": "/img/lehigh-logo.svg",
"sideNav": false,
"mainNav": false,
"utility_nav_items": {
"1": {
"breakpoint": "sm",
"nav_items": {
"1": {
"url": "#",
"link_text": "Link 1"
},
"2": {
"url": "#",
"link_text": "Link 2"
},
"3": {
"url": "#",
"link_text": "Link 3"
},
"4": {
"url": "#",
"link_text": "Link 4"
},
"5": {
"url": "#",
"link_text": "Link 5"
},
"6": {
"url": "#",
"link_text": "Log Out"
}
}
}
},
"main_nav_items": {
"1": {
"sideNav": false,
"mainNav": true,
"breakpoint": "lg",
"nav_items": {
"1": {
"url": "#",
"link_text": "Home"
},
"2": {
"url": "#",
"link_text": "Pages",
"submenu_items": {
"1": {
"heading": "Group 1",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
},
"2": {
"heading": "Group 2",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
},
"4": {
"link_text": "Subpage 4",
"url": "#"
},
"5": {
"link_text": "Subpage 5",
"url": "#"
}
}
},
"3": {
"heading": "Group 3",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
},
"4": {
"heading": "Group 2",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
}
},
"submenu_buttons": {
"1": {
"text": "Button 1",
"url": "#"
},
"2": {
"text": "Button 2",
"url": "#"
},
"3": {
"text": "Button 3",
"url": "#"
},
"4": {
"text": "Button 4",
"url": "#"
}
}
},
"3": {
"url": "#",
"link_text": "Content Sections",
"submenu_items": {
"1": {
"heading": "Group 1",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
},
"2": {
"heading": "Group 2",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
},
"4": {
"link_text": "Subpage 4",
"url": "#"
},
"5": {
"link_text": "Subpage 5",
"url": "#"
}
}
},
"3": {
"heading": "Group 3",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
},
"4": {
"heading": "Group 2",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
}
},
"submenu_buttons": {
"1": {
"text": "Button 1",
"url": "#"
},
"2": {
"text": "Button 2",
"url": "#"
},
"3": {
"text": "Button 3",
"url": "#"
},
"4": {
"text": "Button 4",
"url": "#"
}
}
},
"4": {
"url": "#",
"link_text": "Lists"
},
"5": {
"url": "#",
"link_text": "People"
},
"6": {
"url": "#",
"link_text": "Photo Gallery"
},
"7": {
"url": "#",
"link_text": "Quote"
},
"8": {
"url": "#",
"link_text": "Secure Documents List"
},
"9": {
"url": "#",
"link_text": "Statistics",
"submenu_items": {
"1": {
"heading": "Group 1",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
},
"2": {
"heading": "Group 2",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
},
"4": {
"link_text": "Subpage 4",
"url": "#"
},
"5": {
"link_text": "Subpage 5",
"url": "#"
}
}
},
"3": {
"heading": "Group 3",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
},
"4": {
"heading": "Group 2",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
}
},
"submenu_buttons": {
"1": {
"text": "Button 1",
"url": "#"
},
"2": {
"text": "Button 2",
"url": "#"
},
"3": {
"text": "Button 3",
"url": "#"
},
"4": {
"text": "Button 4",
"url": "#"
}
}
},
"10": {
"url": "#",
"link_text": "Page 10"
},
"11": {
"url": "#",
"link_text": "Page 11"
},
"12": {
"url": "#",
"link_text": "Page 12"
},
"13": {
"url": "#",
"link_text": "Page 13"
}
}
}
}
},
"footer": {
"site_logo": "/img/lehigh-logo.svg",
"website_footer_js": "/files/lehigh_footer-clutch-min.js",
"website_title": "Lehigh's New theme- clutch",
"website_phone": "(610) 758 4025",
"website_email": "email@lehigh.edu",
"website_address": "19 Memorial Drive W.<br /> Lehigh University<br /> Bethlehem, PA<br/> 18015",
"website_address_link": "https://www.google.com/maps/@40.6078606,-75.379379,19z"
},
"logo_position": "left",
"accent_color": "lehigh_brown",
"accent_code": "<style>html:root { --accent_color: #502d0e; }</style>",
"not_available": true,
"alerts": {
"1": {
"type": "success",
"message": "This is a SUCCESS alert—check it out!"
},
"2": {
"type": "danger",
"fa_icons": {
"class": "fas fa-exclamation-triangle",
"description": "exclamation for alert"
},
"message": "This is a DANGER alert—check it out!"
}
},
"bread_items": {
"1": {
"text": "Active Link 1",
"url": "#"
},
"2": {
"text": "Active Link 2",
"url": "#"
},
"3": {
"text": "Current Page",
"url": ""
}
},
"quick_buttons": {
"1": {
"link_text": "FAQ",
"url": "#",
"fa_class": "fas fa-question"
},
"2": {
"link_text": "Documentation",
"url": "#",
"fa_class": "far fa-file-alt"
},
"3": {
"link_text": "Contact Us",
"url": "#",
"fa_class": "fas fa-phone"
}
},
"local_nav": {
"nav_items": {
"1": {
"link_text": "About the Team",
"url": "#",
"active": true
},
"2": {
"link_text": "Page One",
"url": "#"
},
"3": {
"link_text": "Page Two",
"url": "#"
},
"4": {
"link_text": "Page Three",
"url": "#"
}
}
},
"page_header": "Base Layout",
"page_content": "<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>",
"page_content_2": "<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. <a href='#'>Pellentesque sit amet porttitor eget dolor</a>. 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> <p>Leo urna molestie at elementum eu facilisis sed odio. <a href='#'>Facilisi cras fermentum odio</a> eu feugiat pretium nibh ipsum. Nulla malesuada pellentesque elit eget gravida. Elit sed vulputate mi sit. Enim ut tellus elementum sagittis vitae et leo. In nisl nisi scelerisque eu. Interdum varius sit amet mattis vulputate. Feugiat vivamus at augue eget arcu dictum. Scelerisque eleifend donec pretium vulputate sapien. Netus et malesuada fames ac turpis egestas integer. Commodo elit at imperdiet dui accumsan sit amet. Aliquet sagittis id consectetur purus ut faucibus. Velit dignissim sodales ut eu sem integer vitae. Rutrum tellus pellentesque eu tincidunt.</p> <p>Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Eget magna fermentum iaculis eu. Elit sed vulputate mi sit amet mauris commodo quis. Elit at imperdiet dui accumsan sit amet. Quisque id diam vel quam elementum. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Purus sit amet volutpat consequat mauris nunc. Dolor sit amet consectetur adipiscing. Viverra nibh cras pulvinar mattis nunc. Est placerat in egestas erat. Non pulvinar neque laoreet suspendisse interdum consectetur. Faucibus ornare suspendisse sed nisi lacus sed viverra. Elit ut aliquam purus sit amet luctus venenatis lectus. Odio morbi quis commodo odio. Tincidunt id aliquet risus feugiat in ante metus. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Nisi quis eleifend quam adipiscing. Interdum velit laoreet id donec ultrices tincidunt arcu non.</p>",
"cards": {
"1": {
"card_img": "/img/maxresdefault.jpg",
"card_link": null,
"card_headline": "This is the Title 1",
"card_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"buttons": {
"1": {
"text": "Button 1",
"url": "#",
"color": "dark-grey"
},
"2": {
"text": "Button 2",
"url": "#",
"color": "dark-grey"
}
}
},
"2": {
"card_img": "/img/maxresdefault.jpg",
"card_link": null,
"card_headline": "This is the Title 2",
"card_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"buttons": {
"1": {
"text": "Button 1",
"url": "#",
"color": "dark-grey"
},
"2": {
"text": "Button 2",
"url": "#",
"color": "dark-grey"
}
}
},
"3": {
"card_img": "/img/maxresdefault.jpg",
"card_link": null,
"card_headline": "This is the Title 3",
"card_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"buttons": {
"1": {
"text": "Button 1",
"url": "#",
"color": "dark-grey"
},
"2": {
"text": "Button 2",
"url": "#",
"color": "dark-grey"
}
}
},
"4": {
"card_img": "/img/maxresdefault.jpg",
"card_link": null,
"card_headline": "This is the Title 4",
"card_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"buttons": {
"1": {
"text": "Button 1",
"url": "#",
"color": "dark-grey"
},
"2": {
"text": "Button 2",
"url": "#",
"color": "dark-grey"
}
}
}
},
"side_nav_items": {
"1": {
"breakpoint": "md",
"sideNav": true,
"nav_items": {
"1": {
"url": "#",
"link_text": "Page 1",
"submenu_items": {
"1": {
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
},
"4": {
"link_text": "Subpage 4",
"url": "#"
},
"5": {
"link_text": "Subpage 5",
"url": "#"
}
}
}
}
},
"2": {
"url": "#",
"link_text": "Page 2"
},
"3": {
"url": "#",
"link_text": "Page 3"
},
"4": {
"url": "#",
"link_text": "Page 4"
},
"5": {
"url": "#",
"link_text": "Page 5"
}
}
}
},
"side_callout": {
"title": "This is the title",
"body": "This the body <a href=\"#\">link</a>.",
"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"
}
}
},
"side_events": {
"title": "Upcoming Events",
"events_listings": {
"1": {
"title": "Event Title",
"url": "#",
"date": "January 28, 2021",
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
},
"2": {
"title": "Event Title",
"url": "#",
"date": "January 10, 2021",
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
},
"3": {
"title": "Event Title",
"url": "#",
"date": "December 23, 2020",
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
}
}
},
"side_business_card": {
"card_title": "Title of Card",
"person_name": "Person Name",
"fa_icons": {
"1": {
"name": "Phone Number",
"class": "fas fa-phone",
"text": "(610) 758 0001"
},
"2": {
"name": "Email",
"class": "fas fa-envelope",
"link": "mailto:longemail@lehigh.edu",
"text": "longemail@lehigh.edu"
}
}
}
}
Display what a typical page looks like in the Lehigh Clutch theme with no quick links in the header.