5.8.6 Functional/Special
Program Listing Component A
Program Listing Component A Example:
<div class="program-listing-a">
<form class="form-design">
<div class="row">
<div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12">
<div class="form-group input-design">
<label for="searchDegree" class="hide">Search Degrees and Programs</label>
<input id="searchDegree" type="text" placeholder="Search Degrees and Programs" name="Search Degrees and Programs">
</div>
</div>
<div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12">
<div class="form-group select-design">
<label id="searchDegree" class="hide">Search Degrees and Programs</label>
<select class="js-example-disabled-results" aria-labelledby="searchDegree">
<option>Filter By Degree Type</option>
</select>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-12 col-sm-12">
<div class="form-group submit-design">
<input class="form-btn" type="submit" value="Search" title="Search Degrees and Programs">
</div>
</div>
</div>
</form>
</div>
Program Listing Component B
Program Listing Component B Example:
<div class="program-listing-b">
<form class="form-design">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div class="form-group input-design">
<label for="searchDegreeone" class="hide">Search Degrees and Programs</label>
<input id="searchDegreeone" type="text" placeholder="Search Degrees and Programs" name="Search Degrees and Programs">
</div>
</div>
<div class="col-xl-10 col-lg-10 col-md-12 col-sm-12">
<div class="row">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-sm-12">
<div class="form-group select-design">
<label id="byalpha" class="hide">Search Degrees and Programs</label>
<select class="js-example-disabled-results" aria-labelledby="byalpha">
<option>by Alpha</option>
</select>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-sm-12">
<div class="form-group select-design">
<label id="bydepartment" class="hide">by Department</label>
<select class="js-example-disabled-results" aria-labelledby="bydepartment">
<option>by Department</option>
</select>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-sm-12">
<div class="form-group select-design">
<label id="bydegree" class="hide">by Degree</label>
<select class="js-example-disabled-results" aria-labelledby="bydegree">
<option>by Degree</option>
</select>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-sm-12">
<div class="form-group select-design">
<label id="interest" class="hide">by Interest/Skill</label>
<select class="js-example-disabled-results" aria-labelledby="interest">
<option>by Interest/Skill</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-12 col-sm-12">
<div class="form-group submit-design">
<input class="form-btn" type="submit" value="Search">
</div>
</div>
</div>
</form>
</div>
Faculty Listing Component
Faculty Listing Component Example:
<div class="program-listing-faculty">
<form class="form-design">
<div class="row">
<div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12">
<div class="form-group input-design">
<label for="SearchFaculty" class="hide">Search Faculty</label>
<input id="SearchFaculty" type="text" placeholder="Search Faculty" name="Search Faculty">
</div>
</div>
<div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12">
<div class="form-group select-design">
<label id="filterDepartment" class="hide">Filter By Department</label>
<select class="js-example-disabled-results" aria-labelledby="filterDepartment">
<option>Filter By Department</option>
</select>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-12 col-sm-12">
<div class="form-group submit-design">
<input class="form-btn" type="submit" value="Search">
</div>
</div>
</div>
</form>
</div>
Research/Center/Lab Listing Component
Research/Center/Lab Listing Example:
<div class="program-listing-faculty">
<form class="form-design">
<div class="row">
<div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12">
<div class="form-group input-design">
<label for="searchdegree" class="hide">Search Degrees and Programs"</label>
<input id="searchdegree" type="text" placeholder="Search Degrees and Programs" name="Search Degrees and Programs">
</div>
</div>
<div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12">
<div class="form-group select-design">
<label id="filterDepartment" class="hide">Filter By Department</label>
<select class="js-example-disabled-results" aria-labelledby="filterDepartment">
<option>Filter By Department</option>
</select>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-12 col-sm-12">
<div class="form-group submit-design">
<input class="form-btn" type="submit" value="Search">
</div>
</div>
</div>
</form>
</div>
Research Publications Listing Component
Research Publications Listing Component Example:
<div class="program-listing-faculty">
<form class="form-design">
<div class="row">
<div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12">
<div class="form-group input-design">
<label for="searchpublication" class="hide">Search Publications Listing</label>
<input id="searchpublication" type="text" placeholder="Search Publications Listing" name="Search Publications Listing">
</div>
</div>
<div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12">
<div class="form-group select-design">
<label id="filterDepartment" class="hide">Filter By Department</label>
<select class="js-example-disabled-results" aria-labelledby="filterDepartment">
<option>Filter By Department</option>
</select>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-12 col-sm-12">
<div class="form-group submit-design">
<input class="form-btn" type="submit" value="Search">
</div>
</div>
</div>
</form>
</div>
Request for Information Component
Request for Information Component Example:
<div class="request-info-design">
<div class="request-info-bg">
<form class="form-design">
<div class="row no-mrg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12">
<label for="firstName" class="label-design">First Name*</label>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="form-group input-design">
<input id="firstName" type="text" title="First Name" required>
</div>
</div>
</div>
<div class="row no-mrg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12">
<label for="lastName" class="label-design">Last Name*</label>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="form-group input-design">
<input id="lastName" type="text" title="Last Name" required>
</div>
</div>
</div>
<div class="row no-mrg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12">
<label for="email" class="label-design">Email*</label>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="form-group input-design">
<input id="email" type="email" title="Email" required>
</div>
</div>
</div>
<div class="row no-mrg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12">
<label id="term" class="label-design">Term of Entry*</label>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="form-group select-design">
<select class="js-example-disabled-results" aria-labelledby="term" required>
<option>Term</option>
</select>
</div>
</div>
</div>
<div class="row no-mrg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12">
<label class="label-design" id="lbl-select-program">Program/Major*</label>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="form-group select-design">
<select class="js-example-disabled-results" aria-labelledby="lbl-select-program" required>
<option>Term</option>
</select>
</div>
</div>
</div>
<div class="row no-mrg textarea-row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12">
<label for="question" class="label-design">“Ask a counselor a question”</label>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="form-group textarea-design">
<textarea title="Ask a counselor a question" id="question"></textarea>
</div>
</div>
</div>
<div class="row no-mrg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12">
<label for="phone" class="label-design">Phone</label>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="form-group input-design">
<input id="phone" type="number" title="Phone">
</div>
</div>
</div>
<div class="row no-mrg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12">
<label id="lbl-select-freshman" class="label-design">Admit Type</label>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="form-group select-design">
<select class="js-example-disabled-results" aria-labelledby="lbl-select-freshman">
<option>Freshman</option>
</select>
</div>
</div>
</div>
<div class="row no-mrg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12">
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="radio-design-wrapper form-group">
<div class="radio-design">
<label for="Domestic">Domestic</label>
<div class="radio-custom-design">
<input type="radio" id="Domestic" name="Selection" value="Domestic">
<span class="white-circle"> </span>
</div>
</div>
<div class="radio-design">
<label for="International">International</label>
<div class="radio-custom-design">
<input type="radio" id="International" name="Selection" value="International">
<span class="white-circle"> </span>
</div>
</div>
</div>
</div>
</div>
<div class="row no-mrg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12">
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="form-group submit-design">
<input class="form-btn" type="submit" value="Submit">
</div>
</div>
</div>
</form>
</div>
</div>
“Call to Action” Highlight Component
Headline + Descriptive Text + One button
Medium Length Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor
Headline + Descriptive Text + One button Example:
<div 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">
<h4>Medium Length Headline</h4>
</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">Action <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
Headline + Descriptive Text + Two buttons
Headline + Descriptive Text + Two buttons Example:
<div class="headline-text-orange-btns">
<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">
<h4>Medium Length Headline</h4>
</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">Action <i class="fas fa-arrow-right"></i></a>
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
Headline + Descriptive Text + Two buttons
Image/Headline + Descriptive Text + One button
Medium Length Display Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor molestie. Vestibulum at
Image/Headline + Descriptive Text + One button Example:
<div class="content-img-design-sec">
<div class="container">
<div class="row align-items-center mobile-reverse-order">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="heading-paragraph-design">
<h3>Medium Length Display Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor molestie. Vestibulum at </p>
<div class="blue-action-btn">
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="images-design">
<img class="clip-top-img" src="../college/images/functional-1.png" alt="Heading Image">
</div>
</div>
</div>
</div>
</div>
Image/Headline + Descriptive Text + Two button
Image/Headline + Descriptive Text + Two button Example:
<div class="blue-content-img-design">
<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 class="clip-top-img" src="../college/images/functional-3.png" alt="Heading Image">
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="heading-paragraph-design">
<h3>Medium Length Display Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor molestie. Vestibulum at </p>
<div class="blue-action-btn">
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></i></a>
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
Image/Headline + Descriptive Text + Three button
Image/Headline + Descriptive Text + Three button Example:
<div class="blue-bg-img-design">
<div class="container">
<div class="row align-items-center mobile-reverse-order">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="heading-paragraph-design">
<h3>Medium Length Display Headline</h3>
<div class="orange-action-btn">
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></i></a>
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></i></a>
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="images-design">
<img class="clip-top-img" src="../college/images/functional-2.png" alt="Heading Image">
</div>
</div>
</div>
</div>
</div>
Enrollment option
Enrollment Option Example:
<div class="enrollment-section-wrapper" style="background-image: url('images/Future-Roadrunner.png');">
<div class="container">
<div class="enrollment-content">
<h5>Become a</h5>
<h2>Roadrunner</h2>
<div class="roadrunner-btns">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<a href="#" class="action-btn">Request Information <i class="fas fa-arrow-right"></i></a>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<a href="#" class="action-btn">Visit Campus <i class="fas fa-arrow-right"></i></a>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<a href="#" class="action-btn">Apply <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
Quick Facts/Stats Component 1-3 4-6
90%
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Quick Facts Single Example:
<div class="quick-fact-white-wrapper">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-sm-12">
<div class="quick-facts-content">
<h2>90%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
</div>
90%
Lorem ipsum dolor sit amet, consectetur adipiscing elit
90%
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Quick Facts Two Column Example:
<div class="quick-fact-white-wrapper">
<div class="container">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="quick-facts-content">
<h2>90%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="quick-facts-content">
<h2>90%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
</div>
90%
Lorem ipsum dolor sit amet, consectetur adipiscing elit
90%
Lorem ipsum dolor sit amet, consectetur adipiscing elit
90%
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Quick Facts Three Column Example:
<div class="quick-fact-white-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="quick-facts-content">
<h2>90%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="quick-facts-content">
<h2>90%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="quick-facts-content">
<h2>90%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
</div>
130+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
9M
Lorem ipsum dolor sit amet, consectetur adipiscing elit
#2
Lorem ipsum dolor sit amet, consectetur adipiscing elit
3,834
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Quick Facts Blue Background Example:
<div class="quick-fact-blue-wrapper-first">
<div class="container">
<div class="row">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="quick-facts-content">
<h2>130+</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="quick-facts-content">
<h2>9M</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="quick-facts-content">
<h2>#2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="quick-facts-content">
<h2>3,834</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
</div>
130+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
9M
Lorem ipsum dolor sit amet, consectetur adipiscing elit
#2
Lorem ipsum dolor sit amet, consectetur adipiscing elit
3,834
Lorem ipsum dolor sit amet, consectetur adipiscing elit
130+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Quick Facts Orange Background Example:
<div class="quick-fact-orange-wrapper-first">
<div class="container">
<div class="row">
<div class="col-xl-10 col-lg-10 col-md-10 col-sm-12">
<div class="row">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="quick-facts-content">
<h2>130+</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="quick-facts-content">
<h2>9M</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="quick-facts-content">
<h2>#2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="quick-facts-content">
<h2>3,834</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-12">
<div class="quick-facts-content">
<h2>130+</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
</div>
130+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
9M
Lorem ipsum dolor sit amet, consectetur adipiscing elit
#2
Lorem ipsum dolor sit amet, consectetur adipiscing elit
3,834
Lorem ipsum dolor sit amet, consectetur adipiscing elit
130+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
9M
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Quick Facts Blue Background Second Example:
<div class="quick-fact-blue-wrapper-second">
<div class="container">
<div class="row">
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-12">
<div class="quick-facts-content">
<h2>130+</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-12">
<div class="quick-facts-content">
<h2>9M</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-12">
<div class="quick-facts-content">
<h2>#2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-12">
<div class="quick-facts-content">
<h2>3,834</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-12">
<div class="quick-facts-content">
<h2>130+</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-12">
<div class="quick-facts-content">
<h2>9M</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
</div>
Background Colors/Pattern Samples
Primary Navy Background
Navy with Striped Pattern Background
Muted Blue Background
Muted Blue with Striped Pattern Background
Dark Orange Background
Primary Orange Background
Primary Orange Z-pattern Background
Primary Orange with Striped Background
White Background (None)
Cool Gray Background
Cool Gray with Striped Background
Primary Navy Background
<div class="background-color-div navy-bg">
</div>
Navy with Striped Pattern Background
<div class="background-color-div navy-bg-stripe bg-stripe">
</div>
Muted Blue Background
<div class="background-color-div muted-blue-bg">
</div>
Muted Blue with Striped Pattern Background
<div class="background-color-div muted-blue-stripe-bg bg-stripe">
</div>
Dark Orange Background
<div class="background-color-div bg-darkorange">
</div>
Primary Orange Background
<div class="background-color-div bg-orange">
</div>
Primary Orange Z-pattern Background
<div class="background-color-div bg-stripe bg-orange">
</div>
<div class="background-color-div bg-stripe bg-orange">
</div>
<div class="background-color-div white-bg">
</div>
<div class="background-color-div bg-warm-grey">
</div>
<div class="background-color-div bg-cool-grey">
</div>
<div class="background-color-div bg-stripe bg-cool-grey-stripe">
</div>
Gallery Callout
Medium Length Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin
Gallery Layout Example:
<div class="gallery-image-wrapper" style="background-image: url(../college/images/modal.png);">
<div class="gallery-inner-content">
<h3>Medium Length Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin </p>
<div class="view-gallery">
<button class="gallery-btn" data-bs-toggle="modal" data-bs-target="#gallery"><img src="../utsa/images/gallery.png" alt="gallery Icon"> View Gallery</button>
</div>
</div>
</div>
<!-- Gallery Popup -->
<!-- The Modal -->
<div class="modal fade" id="gallery">
<div class="modal-dialog modal-dialog-centered">
<div class="container-1300px">
<div class="modal-content">
<div class="modal-close">
<button type="button" class="close" data-bs-dismiss="modal">Close <i class="fal fa-times"></i></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div id="gallery-slider" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item item active">
<div class="modal-gallery-wrapper">
<div class="modal-gallery-img">
<img src="../college/images/slider-img.png" alt="Gallery Image">
</div>
<div class="modal-gallery-content">
<h5>Lorem ipsum dolor sit amet, consectetur elit</h5>
<p>Lorem ipsum dolor sit amet, consectetur elit</p>
</div>
</div>
</div>
<div class="carousel-item item">
<div class="modal-gallery-wrapper">
<div class="modal-gallery-img">
<img src="../college/images/slider-bg.png" alt="Gallery Image">
</div>
<div class="modal-gallery-content">
<h5>Lorem ipsum dolor sit amet, consectetur elit</h5>
<p>Lorem ipsum dolor sit amet, consectetur elit</p>
</div>
</div>
</div>
<div class="carousel-item item">
<div class="modal-gallery-wrapper">
<div class="modal-gallery-img">
<img src="../college/images/slider-bg.png" alt="Gallery Image">
</div>
<div class="modal-gallery-content">
<h5>Lorem ipsum dolor sit amet, consectetur elit</h5>
<p>Lorem ipsum dolor sit amet, consectetur elit</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#gallery-slider" data-bs-slide="prev" aria-label="Previous Icon">
<span class="carousel-prev-icon"><i class="fal fa-arrow-left"></i></span>
</a>
<a class="carousel-control-next" href="#gallery-slider" data-bs-slide="next" aria-label="Next Icon">
<span class="carousel-next-icon"><i class="fal fa-arrow-right"></i></span>
</a>
</div>
<div class="num"></div>
</div>
</div>
</div>
</div>
</div>
<!-- End Gallery Popup -->
