<!--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 Standard Page</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"><a href="#">Landing Page</a></li>
<li class="breadcrumb-item">Current 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><a href='#'>Lorem ipsum</a> 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>
<section class="cta teal">
<h2>Push the Button!</h2>
<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.</p> <a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</section>
<section class="cta beige">
<h2>Push the Button!</h2>
<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.</p> <a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</section>
<section class="cta dark_grey">
<h2>Push the Button!</h2>
<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.</p> <a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</section>
<section class="cta blue">
<h2>Push the Button!</h2>
<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.</p> <a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</section>
<section class="cta lehigh">
<h2>Push the Button!</h2>
<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.</p> <a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</section>
<section class="cta dark_blue">
<h2>Push the Button!</h2>
<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.</p> <a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</section>
<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>
<p>Leo urna molestie at elementum eu facilisis sed odio. Facilisi cras fermentum odio 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>
</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>
<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">
<li>
<a href="https://twitter.com/lehighu">
<i class="fab fa-twitter"></i>
<span class="sr-only">Like us on Twitter</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/lehighu">
<i class="fab fa-facebook-f"></i>
<span class="sr-only">Like us on Facebook</span>
</a>
</li>
<li>
<a href="https://www.linkedin.com/school/lehigh-college-of-business/">
<i class="fab fa-linkedin"></i>
<span class="sr-only">Like us on LinkedIn</span>
</a>
</li>
<li>
<a href="https://lehighu.tumblr.com/">
<i class="fab fa-tumblr"></i>
<span class="sr-only">Like us on Tumblr</span>
</a>
</li>
<li>
<a href="https://www.tiktok.com/@lehighadmissions">
<i class="fab fa-tiktok"></i>
<span class="sr-only">Like us on TikTok</span>
</a>
</li>
<li>
<a href="https://www.instagram.com/lehighu/">
<i class="fab fa-instagram"></i>
<span class="sr-only">Like us on Instagram</span>
</a>
</li>
<li>
<a href="https://www.youtube.com/user/lehighuofficial">
<i class="fab fa-youtube"></i>
<span class="sr-only">Like us on YouTube</span>
</a>
</li>
</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>
<i class="fas fa-fax"></i>
<span class="sr-only">Fax Number</span>
<span>(610) 758 4026</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>
<div class="footer-buttons text-center">
<a href="#" class="btn btn-primary gold" role="button">
<span class="button_text">Contact Us</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary gold" role="button">
<span class="button_text">Get Help</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</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>
{% extends '@base_layout' %}
{% block region_main %}
<article>
{{ page_content }}
{% for cta in ctas %}
{% include "@call_to_action" with {
title: cta.title,
body_content: cta.body_content,
buttons: cta.buttons,
cta_color: cta.cta_color
} %}
{% endfor %}
{{ page_content_2 }}
</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 %}
{% block footer %}
{% render "@footer_option_2" %}
{% endblock footer %}
{
"has_sidebar": true,
"bread_items": {
"1": {
"text": "Home",
"url": "#"
},
"2": {
"text": "Landing Page",
"url": "#"
},
"3": {
"text": "Current Page",
"url": ""
}
},
"page_header": "This is a Standard Page",
"page_content": "<p><a href='#'>Lorem ipsum</a> 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>",
"ctas": {
"1": {
"title": "Push the Button!",
"body_content": "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.",
"cta_color": "teal",
"buttons": [
{
"text": "Button",
"url": "#"
}
]
},
"2": {
"title": "Push the Button!",
"body_content": "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.",
"cta_color": "beige",
"buttons": [
{
"text": "Button",
"url": "#"
}
]
},
"3": {
"title": "Push the Button!",
"body_content": "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.",
"cta_color": "dark_grey",
"buttons": [
{
"text": "Button",
"url": "#"
}
]
},
"4": {
"title": "Push the Button!",
"body_content": "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.",
"cta_color": "blue",
"buttons": [
{
"text": "Button",
"url": "#"
}
]
},
"5": {
"title": "Push the Button!",
"body_content": "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.",
"cta_color": "lehigh",
"buttons": [
{
"text": "Button",
"url": "#"
}
]
},
"6": {
"title": "Push the Button!",
"body_content": "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.",
"cta_color": "dark_blue",
"buttons": [
{
"text": "Button",
"url": "#"
}
]
}
},
"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. 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> <p>Leo urna molestie at elementum eu facilisis sed odio. Facilisi cras fermentum odio 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>",
"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"
}
}
}
}
.page_top {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto auto auto;
@include media-breakpoint-up(md) {
grid-template-rows: auto auto auto;
}
@include media-breakpoint-up(lg) {
grid-template-columns: 60% auto;
grid-template-rows: auto auto auto;
}
.title {
grid-row: 1 / 2;
grid-column: 1 / 3;
&.buttons_included {
grid-column: 1 / 2;
@include media-breakpoint-down(sm) {
grid-column: 1 / 3;
}
}
}
.page_navigation {
grid-column: 1 / 2;
grid-row: 3 / 4;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
@include media-breakpoint-up(md) {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
@include media-breakpoint-up(lg) {
grid-column: 1 / 2;
}
.local_nav {
margin: 0 0 0 $space_neg_one;
}
}
nav[aria-label='breadcrumb'] {
grid-column: 1 / 2;
grid-row: 4 / 5;
margin: 0 $space_neg_one;
@include media-breakpoint-up(md) {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
}
}
.right-content {
> div {
margin: 0 0 $space-two 0;
&:last-of-type {
margin: 0;
}
}
}
This shows what the most common page used in Lehigh Clutch will look like.