<!--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">
<section class="cta beige">
<h2>This is the title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis</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 teal">
<h2>This is the title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis</p> <a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<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>This is the title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis</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>This is the title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis</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>This is the title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis</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>This is the title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis</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>
</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></h2>
<ul class="social-media">
</ul>
<ul class="contact-info">
</ul>
</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 }}
{% for cta in ctas %}
{% include "@call_to_action" with {
title: cta.title,
body_content: cta.body_content,
cta_color: cta.cta_color,
buttons: cta.buttons
} %}
{% endfor %}
{% endblock region_main %}
{
"page_header": "This is the title",
"ctas": {
"1": {
"title": "This is the title",
"body_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis",
"cta_color": "beige",
"buttons": {
"1": {
"text": "Button",
"url": "#"
}
}
},
"2": {
"title": "This is the title",
"body_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis",
"cta_color": "teal",
"buttons": {
"1": {
"text": "Button",
"url": "#"
},
"2": {
"text": "Button",
"url": "#"
}
}
},
"3": {
"title": "This is the title",
"body_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis",
"cta_color": "dark_grey",
"buttons": {
"1": {
"text": "Button",
"url": "#"
}
}
},
"4": {
"title": "This is the title",
"body_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis",
"cta_color": "blue",
"buttons": {
"1": {
"text": "Button",
"url": "#"
}
}
},
"5": {
"title": "This is the title",
"body_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis",
"cta_color": "lehigh",
"buttons": {
"1": {
"text": "Button",
"url": "#"
}
}
},
"6": {
"title": "This is the title",
"body_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis",
"cta_color": "dark_blue",
"buttons": {
"1": {
"text": "Button",
"url": "#"
}
}
}
}
}
This shows what the call to action sections will look like on a page.