<!--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="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">Active 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">
<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>
<section class="photo_gallery">
<div class="gallery_item">
<a class="gallery" rel="" href="/img/lava.jpg" title="">
<img src="/img/lava.jpg" alt="hot lava" />
</a>
</div><!-- end gallery_item -->
<div class="gallery_item">
<a class="gallery" rel="" href="/img/lava-2.jpg" title="">
<img src="/img/lava-2.jpg" alt="hot lava" />
</a>
</div><!-- end gallery_item -->
<div class="gallery_item">
<a class="gallery" rel="" href="/img/maxresdefault.jpg" title="">
<img src="/img/maxresdefault.jpg" alt="hot lava" />
</a>
</div><!-- end gallery_item -->
<div class="gallery_item">
<a class="gallery" rel="" href="/img/lava.jpg" title="">
<img src="/img/lava.jpg" alt="hot lava" />
</a>
</div><!-- end gallery_item -->
</section>
</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>© <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' %}
{% render "@header" %}
{% block region_main %}
{{ page_content }}
{% include "@photo_gallery" with {
group: photo_gallery.photo_group,
gallery_items: photo_gallery.gallery_items
} %}
{% endblock region_main %}
{% block footer %}
{% render "@footer_option_1" %}
{% endblock footer %}
{
"has_sidebar": true,
"has_breadcrumb": false,
"img_src": "/img/maxresdefault.jpg",
"img_alt": "volcano",
"hero_src_img": "/img/maxresdefault.jpg",
"hero_img_alt": "volcano",
"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": "Active 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>",
"photo_gallery": {
"group": "group1",
"gallery_items": {
"1": {
"img": "/img/lava.jpg",
"imgAlt": "hot lava"
},
"2": {
"img": "/img/lava-2.jpg",
"imgAlt": "hot lava"
},
"3": {
"img": "/img/maxresdefault.jpg",
"imgAlt": "hot lava"
},
"4": {
"img": "/img/lava.jpg",
"imgAlt": "hot lava"
}
}
},
"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 page shows what the photo gallery section looks like on a page.