This page is a test page to view multiple stacked components for debugging issues. This is not meant to be a page that is utilized in production.
The following components are utilized on this page:
Context data for this page is purposefully overridden to use the exact same headline, copy and image in order to view how different components are laid out between different variants.
<div id="body-wrapper">
<div id="skip-content"><a class="Skip-btn" href="#skipToContent">Skip To Main Content</a></div>
<!-- Main Content Body -->
<main id="skipToContent">
<h1>Stacked Component Testing Page</h1>
<h2 class="display-2">TESTING ONLY - DO NOT USE</h2>
<section class="my-5">
<div class="container">
<div class="row">
<h2 class="h3 mb-3">This is the Link List Title</h2>
<div class="col-12 col-md-6">
<ul class="resources-list">
<li><a href="#">Covid-19 Funding Opps</a></li>
<li><a href="#">Covid-19 Labs Exemption</a></li>
<li><a href="#">Find Tech Transfer</a></li>
<li><a href="#">College of Business Administration</a></li>
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="resources-list">
<li><a href="#">Covid-19 Funding Opps</a></li>
<li><a href="#">Covid-19 Labs Exemption</a></li>
<li><a href="#">Find Tech Transfer</a></li>
<li><a href="#">College of Business Administration</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="content-img-design orange-offset-bg bt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-last">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-top-right" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-first">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<h3 class="h4">Test Subheader</h3>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design orange-offset-bg offset-left pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-bottom-left" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design blue-offset-bg pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-last">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-top-right" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-first">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<h3 class="h4">Test Subheader</h3>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="orange-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design blue-offset-bg offset-left ">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-bottom-left" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="orange-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="headline-text-btn-wrapper grey-bg">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="heading-wrapper">
<h2 class="h4">Medium Length Headline</h2>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="headline-text-btn-wrapper blue-bg stripe-bg">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="heading-wrapper">
<h2 class="h4">Medium Length Headline</h2>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="orange-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="headline-text-btn-wrapper grey-bg">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="heading-wrapper">
<h2 class="h4">Medium Length Headline</h2>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design orange-offset-bg bt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-last">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-top-right" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-first">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<h3 class="h4">Test Subheader</h3>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design blue-offset-bg offset-left ">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-bottom-left" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="orange-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design orange-offset-bg offset-left pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-bottom-left" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design blue-offset-bg pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-last">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-top-right" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-first">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<h3 class="h4">Test Subheader</h3>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="orange-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="headline-text-btn-wrapper grey-bg">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="heading-wrapper">
<h2 class="h4">Medium Length Headline</h2>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="headline-text-btn-wrapper blue-bg stripe-bg">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="heading-wrapper">
<h2 class="h4">Medium Length Headline</h2>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="orange-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="headline-text-btn-wrapper grey-bg">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="heading-wrapper">
<h2 class="h4">Medium Length Headline</h2>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design blue-offset-bg pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-last">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-top-right" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-first">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<h3 class="h4">Test Subheader</h3>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="orange-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="headline-text-btn-wrapper grey-bg">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="heading-wrapper">
<h2 class="h4">Medium Length Display Stacked</h2>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="paragraph-text">
<p></p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design orange-offset-bg offset-left pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-bottom-left" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-bottom-left" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design blue-offset-bg offset-left ">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-bottom-left" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="orange-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="headline-text-btn-wrapper">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="heading-wrapper">
<h2 class="h4">Medium Length Headline</h2>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="orange-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design orange-offset-bg bt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-last">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-top-right" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-first">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<h3 class="h4">Test Subheader</h3>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-last">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-top-right" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-first">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<h3 class="h4">Test Subheader</h3>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="blue-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-img-design blue-offset-bg pt-5 pb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-last">
<div class="images-design">
<img width="560px" height="320px" class="clip-mask-top-right" src="../../college-dls/college/images/functional-1.png" alt="Heading Image" loading="lazy" />
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 order-first">
<div class="heading-paragraph-design">
<h2 class="h3">Medium Length Display Stacked</h2>
<h3 class="h4">Test Subheader</h3>
<div class="paragraph-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
<ul>
<li>example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</p>
</div>
<div class="orange-action-btn">
<a href="#" class="action-btn"> First Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="page-text-wrapper" id="skipToContent">
<div class="container">
<div class="row mobile-reverse-order">
<div class="col-lg-12 col-md-12 col-sm-12">
<h2>Unordered and Ordered List Testing</h2>
<h3 class="orange-a11y">UL With Classes Added</h3>
<div class="unordered-list">
<ul class="ul-list">
<li>This is a list item.</li>
<li>This is a list item.</li>
<li class="ul-inner-list">This is a nested List
<ul>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ul>
</li>
<li>The Policy Studies Center of the College of Public Policy.</li>
</ul>
</div>
<h3 class="orange-a11y">OL With Classes Added</h3>
<div class="ordered-list">
<ol class="ol-list">
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ol>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<h2>Unordered and Ordered List Testing</h2>
<h3 class="orange-a11y">UL With Classes Scoped to Page</h3>
<div>
<ul>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a nested List
<ul>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ul>
</li>
</ul>
</div>
<h3 class="orange-a11y">OL With Classes Scoped to Page</h3>
<div>
<ol>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ol>
</div>
<p>End of Lists.</p>
</div>
</div>
</div>
</section>
<!-- END CTA -->
</main>
<div aria-label="Back to Top" role="navigation">
<a href="#top-area" id="top-link" title="To top of page"><em class="back-to-top"> </em><span class="top-link-text">Back to Top</span></a>
</div>
<!--The below is only for the DLS for the button to show-->
<script>
document.getElementById("top-link").style.display = "block";
</script>
</div>
/* components/03-example-pages/12-stacked-testing-page/stacked-testing.scss */
/* BEGIN stacked-testing.scss */
/* END stacked-testing.scss */
<div id="body-wrapper">
<div id="skip-content"><a class="Skip-btn" href="#skipToContent">Skip To Main Content</a></div>
<!-- Main Content Body -->
<main id="skipToContent">
<h1>Stacked Component Testing Page</h1>
<h2 class="display-2">TESTING ONLY - DO NOT USE</h2>
{{ render '@link-list' link-list-context }}
{{ render '@call-to-action-media--orange' cta-media-context }}
{{ render '@call-to-action-media--orange-left' cta-media-context }}
{{ render '@call-to-action-media--blue' cta-media-context }}
{{ render '@call-to-action-media--blue-left' cta-media-context }}
{{ render '@call-to-action-buttons--grey' }}
{{ render '@call-to-action-buttons--blue' }}
{{ render '@call-to-action-buttons--grey' }}
{{ render '@call-to-action-media--orange' cta-media-context }}
{{ render '@call-to-action-media--blue-left' cta-media-context }}
{{ render '@call-to-action-media--orange-left' cta-media-context }}
{{ render '@call-to-action-media--blue' cta-media-context }}
{{ render '@call-to-action-buttons--grey' }}
{{ render '@call-to-action-buttons--blue' }}
{{ render '@call-to-action-buttons--grey' }}
{{ render '@call-to-action-media--blue' cta-media-context }}
{{ render '@call-to-action-buttons--grey' cta-media-context }}
{{ render '@call-to-action-media--orange-left' cta-media-context }}
{{ render '@call-to-action-media--left' cta-media-context }}
{{ render '@call-to-action-media--blue-left' cta-media-context }}
{{ render '@call-to-action-buttons' }}
{{ render '@call-to-action-media--orange' cta-media-context }}
{{ render '@call-to-action-media' cta-media-context }}
{{ render '@call-to-action-media--blue' cta-media-context }}
<section class="page-text-wrapper" id="skipToContent">
<div class="container">
<div class="row mobile-reverse-order">
<div class="col-lg-12 col-md-12 col-sm-12">
<h2>Unordered and Ordered List Testing</h2>
<h3 class="orange-a11y">UL With Classes Added</h3>
<div class="unordered-list"><ul class="ul-list">
<li>This is a list item.</li>
<li>This is a list item.</li>
<li class="ul-inner-list">This is a nested List
<ul><li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ul>
</li>
<li>The Policy Studies Center of the College of Public Policy.</li>
</ul>
</div>
<h3 class="orange-a11y">OL With Classes Added</h3>
<div class="ordered-list"><ol class="ol-list">
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ol>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<h2>Unordered and Ordered List Testing</h2>
<h3 class="orange-a11y">UL With Classes Scoped to Page</h3>
<div><ul>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a nested List
<ul>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li></ul>
</li>
</ul>
</div>
<h3 class="orange-a11y">OL With Classes Scoped to Page</h3>
<div><ol>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ol>
</div>
<p>End of Lists.</p>
</div>
</div>
</div>
</section>
<!-- END CTA -->
</main>
{{ render '@back-to-top' }}
</div>