<!--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">Person Name</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">
<div class="profile_component">
<div class="profile-square">
<img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div>
<div class="profile-details">
<div class="pronouns">
she/her
</div><!-- end pronouns -->
<div class="person-email">
<span class="fas fa-envelope"><span class="sr-only">Email address:</span></span> <a href="mailto:emailxx@lehigh.edu">emailxx@lehigh.edu</a>
</div><!-- end person-email -->
<div class="person-titles">
<div class="person-position">
<div class="profile_component--profile_title">Position Title</div>
<div class="positions">
<div class="position_details">
<div><span class="fas fa-map-marker-alt"><span class="sr-only">Location:</span></span> Location</div>
</div>
<div class="position_details">
<div><span class="fas fa-phone"><span class="sr-only">Phone number:</span></span> x0000</div>
</div>
<div class="position_details">
<div><span class="fas fa-fax"><span class="sr-only">Fax number:</span></span> 610-111-0000</div>
</div>
<div class="position_details">
<span class="far fa-sitemap"><span class="sr-only">Member of:</span></span> Member of
</div>
</div><!-- end positions -->
</div><!-- end person-positions -->
</div><!-- end person-titles -->
</div><!-- end person-details -->
</div><!-- end person-profile -->
<div class="person-page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Id velit ut tortor pretium viverra. Integer feugiat scelerisque varius morbi. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. Aliquam faucibus purus in massa tempor nec feugiat nisl pretium. Tellus cras adipiscing enim eu turpis egestas. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Purus viverra accumsan in nisl nisi scelerisque. Sit amet dictum sit amet justo. Nunc sed augue lacus viverra vitae congue. Molestie at elementum eu facilisis sed odio.</p>
<p>Vehicula ipsum a arcu cursus vitae congue mauris. Tellus cras adipiscing enim eu turpis. At in tellus integer feugiat scelerisque. Aliquam faucibus purus in massa tempor. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Ac turpis egestas integer eget aliquet nibh praesent. Enim facilisis gravida neque convallis a. Molestie a iaculis at erat. Sem integer vitae justo eget. Purus viverra accumsan in nisl nisi scelerisque. Arcu bibendum at varius vel pharetra vel turpis nunc eget.
</div><!-- person-page-wrapper -->
<div class="person_category">
<h2>Person Category</h2>
<p>Person Category</p>
</div>
<div class="more-info">
<h2>More Information</h2>
<div class="accordion" id="accordion">
<div class="card accordion_item">
<div class="card-header" id="headingone">
<h3 class="mb-0">
<button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapseone" aria-expanded="false" aria-controls="collapseone">
<span class="accordion-button-text">
More Info 1
</span>
<i class="fas fa-chevron-down"></i>
<span class="sr-only">Show the content</span>
</button>
</h3>
</div>
<div id="collapseone" class="collapse" aria-labelledby="headingone" data-parent="#accordion">
<div class="card-body">
Nunc nisl magna, semper vel efficitur eget, fermentum eget ipsum. In vel lobortis est. Aliquam at leo vel lectus hendrerit aliquam dignissim molestie neque.
</div>
</div>
</div>
<div class="card accordion_item">
<div class="card-header" id="headingtwo">
<h3 class="mb-0">
<button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">
<span class="accordion-button-text">
More Info 2
</span>
<i class="fas fa-chevron-down"></i>
<span class="sr-only">Show the content</span>
</button>
</h3>
</div>
<div id="collapsetwo" class="collapse" aria-labelledby="headingtwo" data-parent="#accordion">
<div class="card-body">
Nunc nisl magna, semper vel efficitur eget, fermentum eget ipsum. In vel lobortis est. Aliquam at leo vel lectus hendrerit aliquam dignissim molestie neque.
</div>
</div>
</div>
</div>
</div>
</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 %}
{% include "@profile_component" %}
<div class="person-page-wrapper">
{{ page_content }}
</div><!-- person-page-wrapper -->
{% if person_category %}
<div class="person_category">
<h2>Person Category</h2>
<p>{{ person_category }}</p>
</div>
{% endif %}
<div class="more-info">
<h2>More Information</h2>
<div class="accordion" id="accordion{{ accordion_name }}">
{% for accordion_item in accordion_items %}
{% include "@accordion_item" with accordion_item %}
{% endfor %}
</div>
</div>
{% endblock region_main %}
{% block footer %}
{% render "@footer_option_2" %}
{% endblock footer %}
{
"has_sidebar": false,
"profile_image": {
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
},
"page_header": "Person Name",
"pronouns": "she/her",
"email": "emailxx@lehigh.edu",
"title": "Position Title",
"location": "Location",
"phone": "x0000",
"fax": "610-111-0000",
"member": "Member of",
"person_category": "Person Category",
"page_content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Id velit ut tortor pretium viverra. Integer feugiat scelerisque varius morbi. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. Aliquam faucibus purus in massa tempor nec feugiat nisl pretium. Tellus cras adipiscing enim eu turpis egestas. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Purus viverra accumsan in nisl nisi scelerisque. Sit amet dictum sit amet justo. Nunc sed augue lacus viverra vitae congue. Molestie at elementum eu facilisis sed odio.</p> <p>Vehicula ipsum a arcu cursus vitae congue mauris. Tellus cras adipiscing enim eu turpis. At in tellus integer feugiat scelerisque. Aliquam faucibus purus in massa tempor. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Ac turpis egestas integer eget aliquet nibh praesent. Enim facilisis gravida neque convallis a. Molestie a iaculis at erat. Sem integer vitae justo eget. Purus viverra accumsan in nisl nisi scelerisque. Arcu bibendum at varius vel pharetra vel turpis nunc eget.",
"accordion_items": {
"1": {
"accordion_heading": "More Info 1",
"accordion_content": "Nunc nisl magna, semper vel efficitur eget, fermentum eget ipsum. In vel lobortis est. Aliquam at leo vel lectus hendrerit aliquam dignissim molestie neque.",
"accordion_id": "one",
"accordion_active": false
},
"2": {
"accordion_heading": "More Info 2",
"accordion_content": "Nunc nisl magna, semper vel efficitur eget, fermentum eget ipsum. In vel lobortis est. Aliquam at leo vel lectus hendrerit aliquam dignissim molestie neque.",
"accordion_id": "two",
"accordion_active": false
}
}
}
Display an example of an employee page.