<!--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-md-9 col-print-12 ">
<h1 class="page-title">This is the title</h1>
<nav aria-label="breadcrumb">
<h2 id="system-breadcrumb" class="sr-only">Breadcrumb</h2>
<ol class="breadcrumb">
</ol>
</nav>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row justify-content-center">
<section class="main-content col-12 col-print-12">
<article>
<picture class="image">
<img src="/img/maxresdefault.jpg" alt="hot lava" />
</picture>
<p><em>By: Author Name</em></p>
<p><em>Posted: September 30, 2020</em></p>
<p>Lorem ipsum dolor sit amet <a href='Lorem ipsum dolor sit amet'>consectetur</a> adipiscing elit. Aenean et fringilla arcu. Morbi eget urna nec turpis ornare facilisis. Pellentesque tristique condimentum risus. Nunc nisl magna, semper vel efficitur eget, fermentum eget ipsum. In vel lobortis est. Aliquam at leo vel lectus hendrerit aliquam dignissim molestie neque. In orci est, eleifend pulvinar leo sit amet, tincidunt semper lorem. Duis placerat, lectus sit amet sagittis fringilla, nibh mauris elementum tellus, vitae tristique velit lorem eu enim.</p>
<h2>Sub Section</h2>
<p>Integer ornare, urna eu hendrerit vestibulum, turpis diam gravida urna, eget ullamcorper lacus sem at magna. Pellentesque sed rhoncus nulla. Duis eros elit, congue id congue sagittis, scelerisque ut erat. In hac habitasse platea dictumst. Sed vitae urna et magna elementum mollis in elementum purus. Nunc imperdiet leo enim, consequat lacinia magna aliquet quis. Fusce ex erat, lacinia sit amet massa eu, molestie pretium magna. Ut sit amet purus libero. Vivamus et sapien blandit, condimentum tortor sit amet, consectetur mauris. Suspendisse sagittis dapibus purus eu ultrices. </p>
</article>
<section class="tags">
<h2>Tags:</h2>
<ul>
<li><a href="#">Tag 1</a></li>
<li><a href="#">Tag 2</a></li>
<li><a href="#">Tag 3</a></li>
</ul>
</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">
<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>
{% block article_image %}
{% include "@images" with {
img_src: images.img_src,
img_alt: images.img_alt
} %}
{% endblock %}
{% block region_by_line %}
<p><em>By: {{ author_name }}</em></p>
<p><em>{{ article_date }}</em></p>
{% endblock region_by_line %}
{{ page_content }}
</article>
{% if tags %}
{% block region_tags %}
<section class="tags">
<h2>Tags:</h2>
<ul>
{% for tag in tags %}
<li><a href="{{ tag.url }}">{{ tag.tag_name }}</a></li>
{% endfor %}
</ul>
</section>
{% endblock region_tags %}
{% endif %}
{% endblock region_main %}
{% block footer %}
{% render "@footer_option_2" %}
{% endblock footer %}
{
"page_header": "This is the title",
"author_name": "Author Name",
"article_date": "Posted: September 30, 2020",
"page_content": "<p>Lorem ipsum dolor sit amet <a href='Lorem ipsum dolor sit amet'>consectetur</a> adipiscing elit. Aenean et fringilla arcu. Morbi eget urna nec turpis ornare facilisis. Pellentesque tristique condimentum risus. Nunc nisl magna, semper vel efficitur eget, fermentum eget ipsum. In vel lobortis est. Aliquam at leo vel lectus hendrerit aliquam dignissim molestie neque. In orci est, eleifend pulvinar leo sit amet, tincidunt semper lorem. Duis placerat, lectus sit amet sagittis fringilla, nibh mauris elementum tellus, vitae tristique velit lorem eu enim.</p><h2>Sub Section</h2><p>Integer ornare, urna eu hendrerit vestibulum, turpis diam gravida urna, eget ullamcorper lacus sem at magna. Pellentesque sed rhoncus nulla. Duis eros elit, congue id congue sagittis, scelerisque ut erat. In hac habitasse platea dictumst. Sed vitae urna et magna elementum mollis in elementum purus. Nunc imperdiet leo enim, consequat lacinia magna aliquet quis. Fusce ex erat, lacinia sit amet massa eu, molestie pretium magna. Ut sit amet purus libero. Vivamus et sapien blandit, condimentum tortor sit amet, consectetur mauris. Suspendisse sagittis dapibus purus eu ultrices. </p>",
"tags": {
"1": {
"url": "#",
"tag_name": "Tag 1"
},
"2": {
"url": "#",
"tag_name": "Tag 2"
},
"3": {
"url": "#",
"tag_name": "Tag 3"
}
},
"images": {
"img_src": "/img/maxresdefault.jpg",
"img_alt": "hot lava"
}
}
article {
.page-title {
&::after {
display: none;
}
}
}
.tags {
background-color: $grey_lightest;
padding: $space_two;
margin: $space_two 0 0 0;
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
.color-scheme-dark & {
background-color: $dark_mode_grey;
}
ul {
@include reset-list-nav;
display: flex;
flex-direction: row;
flex-wrap: wrap;
li {
&::after {
content: ',';
padding: 0 5px 0 0;
}
&:last-of-type {
&::after {
content: '';
padding: 0;
}
}
}
}
}
This shows a typical news article