<!--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 image beige left">
<div class="cta_text">
<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>
<div class="cta_btns">
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div><!-- end cta_text -->
<div class="cta_img" style="background-image: url('/img/lava-4.jpg');">
</div>
</section>
<section class="cta image teal right">
<div class="cta_text">
<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>
<div class="cta_btns">
<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>
</div>
</div><!-- end cta_text -->
<div class="cta_img" style="background-image: url('/img/lava-4.jpg');">
</div>
</section>
<section class="cta image dark_grey left">
<div class="cta_text">
<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>
<div class="cta_btns">
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div><!-- end cta_text -->
<div class="cta_img" style="background-image: url('/img/lava-4.jpg');">
</div>
</section>
<section class="cta image blue right">
<div class="cta_text">
<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>
<div class="cta_btns">
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div><!-- end cta_text -->
<div class="cta_img" style="background-image: url('/img/lava-4.jpg');">
</div>
</section>
<section class="cta image lehigh left">
<div class="cta_text">
<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>
<div class="cta_btns">
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div><!-- end cta_text -->
<div class="cta_img" style="background-image: url('/img/lava-4.jpg');">
</div>
</section>
<section class="cta image dark_blue right">
<div class="cta_text">
<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>
<div class="cta_btns">
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div><!-- end cta_text -->
<div class="cta_img" style="background-image: url('/img/lava-4.jpg');">
</div>
</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_image" with {
title: cta.title,
body_content: cta.body_content,
cta_color: cta.cta_color,
buttons: cta.buttons,
cta_img: cta.cta_img,
align_text: cta.align_text
} %}
{% 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": "#"
}
},
"cta_img": "/img/lava-4.jpg",
"align_text": "left"
},
"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": "#"
}
},
"cta_img": "/img/lava-4.jpg",
"align_text": "right"
},
"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": "#"
}
},
"cta_img": "/img/lava-4.jpg",
"align_text": "left"
},
"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": "#"
}
},
"cta_img": "/img/lava-4.jpg",
"align_text": "right"
},
"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": "#"
}
},
"cta_img": "/img/lava-4.jpg",
"align_text": "left"
},
"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": "#"
}
},
"cta_img": "/img/lava-4.jpg",
"align_text": "right"
}
}
}
This shows what the call to action with image sections will look like on a page.