<!--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">Podcast</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>
</article>
</section>
<section class="right-content col-sm-12 col-md-4 col-lg-3 col-xl-3 col-print-12">
</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 }}
</article>
{% endblock region_main %}
{% 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": "Podcast",
"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>"
}
.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 podcast page used in Lehigh Clutch will look like.