<!--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">Document List 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">Page Title</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">
<h2>Insecure Document List</h2>
<div class="document_list insecure">
<ul class="list">
<li class="list_item">
<span>
<a href="">
<a href="#">Document Item 1</a>
</a>
</span>
</li><!-- end list_item -->
<li class="list_item">
<span>
<a href="">
<a href="#">Document Item 2</a>
</a>
</span>
</li><!-- end list_item -->
<li class="list_item">
<span>
<a href="">
<a href="#">Document Item 3</a>
</a>
</span>
</li><!-- end list_item -->
<li class="list_item">
<span>
<a href="">
<a href="#">Document Item 4</a>
</a>
</span>
</li><!-- end list_item -->
</ul>
</div><!-- end group_list -->
<h2>Secure Document List</h2>
<div class="document_list secure">
<ul class="list">
<li class="list_item">
<span>
<a href="">
<a href="#">Document Item 1</a>
</a>
</span>
</li><!-- end list_item -->
<li class="list_item">
<span>
<a href="">
<a href="#">Document Item 2</a>
</a>
</span>
</li><!-- end list_item -->
<li class="list_item">
<span>
<a href="">
<a href="#">Document Item 3</a>
</a>
</span>
</li><!-- end list_item -->
<li class="list_item">
<span>
<a href="">
<a href="#">Document Item 4</a>
</a>
</span>
</li><!-- end list_item -->
</ul>
</div><!-- end group_list -->
</section>
<section class="right-content col-sm-12 col-md-4 col-lg-3 col-xl-3 col-print-12">
<div class="side_register">
<a href="#" class="btn btn-primary gold" role="button">
<span class="button_text">Register for Event</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
<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>
</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 %}
{{ content }}
{% include "@insecure-document" with {
list_items: insecure_doc.list_items
} %}
{{ content_2 }}
{% include "@secure-document" with {
list_items: secure_doc.list_items
} %}
{% endblock region_main %}
{% block footer %}
{% render "@footer_option_2" %}
{% endblock footer %}
{
"has_sidebar": true,
"has_page_navigation": false,
"has_quick_buttons": false,
"page_header": "Document List Page",
"bread_items": {
"1": {
"text": "Home",
"url": "#"
},
"2": {
"text": "Landing Page",
"url": "#"
},
"3": {
"text": "Page Title",
"url": ""
}
},
"content": "<h2>Insecure Document List</h2>",
"insecure_doc": {
"list_items": {
"1": {
"list_item_content": "<a href=\"#\">Document Item 1</a>"
},
"2": {
"list_item_content": "<a href=\"#\">Document Item 2</a>"
},
"3": {
"list_item_content": "<a href=\"#\">Document Item 3</a>"
},
"4": {
"list_item_content": "<a href=\"#\">Document Item 4</a>"
}
}
},
"content_2": "<h2>Secure Document List</h2>",
"secure_doc": {
"list_items": {
"1": {
"list_item_content": "<a href=\"#\">Document Item 1</a>"
},
"2": {
"list_item_content": "<a href=\"#\">Document Item 2</a>"
},
"3": {
"list_item_content": "<a href=\"#\">Document Item 3</a>"
},
"4": {
"list_item_content": "<a href=\"#\">Document Item 4</a>"
}
}
},
"side_event_register": {
"buttons": {
"1": {
"text": "Register for Event",
"url": "#",
"color": "gold"
}
}
},
"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"
}
}
}
}
This page show what the document list looks like on a page.