This reference page uses the following components in the following order:
<div id="body-wrapper">
<div id="skip-content"><a class="Skip-btn" href="#skipToContent">Skip To Main Content</a></div>
<!-- Header Section -->
<header id="header" class="main-header sticky-header">
<!-- search-->
<section class="global-searchbar" id="global-searchbar">
<div class="container-fluid blue-bg">
<!-- Do not update any ids without consulting the developer, js may depend on it -->
<form action="#search" class="search-form" id="cse-search-box">
<div class="row d-flex align-items-center buttons-bg-wrapper">
<div class="col-9 col-sm-10">
<input name="cx" type="hidden" value="000238266656426684962:mzli4pte7ko" />
<input name="cof" type="hidden" value="FORID:11" />
<label for="searchField">
<span class="visually-hidden-focusable text-white">Search Bar</span>
</label>
<input tabindex="-1" class="form-control global-searchfield" id="searchField" name="q" onblur="if (this.value == '') {this.value = 'Search UT San Antonio';}" onfocus="if (this.value == 'Search UT San Antonio') {this.value = '';}" size="15" type="text" value="Search UT San Antonio" />
</div>
<div class="col-3 col-sm-2">
<button class="btn btn-secondary btn-search" type="submit" id="search-button" tabindex="-1">
<span class="visually-hidden-focusable">Search</span>
</button>
</div>
</div>
</form>
</div>
</section>
<!-- .search -->
<!-- top-bar -->
<section class="top-bar primary">
<div class="container-fluid g-0">
<div class="row align-items-center">
<div class="col-4">
<a href="https://www.utsa.edu" title="UT San Antonio" class="tb-logo">
<!-- old classes: logo-full d-none d-sm-block -->
<img src="../../college-dls/utsa/images/ut-san-antonio-horizontal.svg" width="333px" height="20px" class="" alt="The University of Texas at San Antonio" />
</a>
</div>
<div class="col-8">
<nav class="quick-links-container">
<ul class="quick-links">
<li><a href="https://utsa.edu/today/" id="a-header-topbar-utsa-today" aria-label="UT San Antonio News">News</a></li>
<li><a href="https://my.utsa.edu/" id="a-header-topbar-myutsa">myUTSA</a></li>
<li class="search-toggle">
<a href="#" class="global-search" id="search" role="button"><span class="fas fa-search"></span> <span class="visually-hidden" id="search-title">Search</span></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<!-- Sticky Header -->
<div class="top-navigation">
<!-- Main Header -->
<div id="main-header">
<div class="container">
<nav class="navbar navbar-expand-md">
<a class="navbar-brand p-2" href="#" aria-label="Logo Image">
<img class="college-logo" width="265px" height="33px" alt="Full College Name Goes Here" src="../../college-dls/college/images/logo-hcap-2color-formal-single-short.svg" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar4" aria-label="Toggle">
<span class="navbar-toggler-icon"><i class="fal fa-bars"></i></span>
<span class="navbar-toggler-close-icon" style="display: none;"><i class="fal fa-times"></i></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar4">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" aria-label="College Admissions">Admissions</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Programs</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" aria-label="Undergraduate Programs">Undergraduate</a>
<a class="dropdown-item" href="#" aria-label="Graduate Programs">Graduate</a>
<a class="dropdown-item" href="#" aria-label="Certificate Programs">Certificate</a>
<a class="dropdown-item" href="#" aria-label="another link option for testing">Testing a long link to make sure it wraps on mobile</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" aria-label="Faculty & Research">Faculty & Research </a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-label="Student Success">Student Success</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" aria-label="Undergraduate Student Resources">Undergraduate</a>
<a class="dropdown-item" href="#" aria-label="Graduate Student Resources">Graduate</a>
<a class="dropdown-item" href="#" aria-label="Certificate Resources">Certificate</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-label="College Departments">Departments</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" aria-label="Another sub menu item">Undergraduate</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-label="About the College">About</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" aria-label="About Undergraduate Programs">Undergraduate</a>
<a class="dropdown-item" href="#" target="_parent">This is a longer link for testing</a>
</div>
</li>
<li class="nav-item mobile-nav-btns">
<a href="#" class="action-btn">Apply <i class="fas fa-arrow-right"></i></a>
<a href="#" class="action-btn">Visit <i class="fas fa-arrow-right"></i></a>
<a href="#" class="action-btn">Request Info <i class="fas fa-arrow-right"></i></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!--End Main Header -->
<!-- Request Apply Header -->
<div class="bottom-absolute-header d-flex flex-row-reverse">
<div id="orange-bg-header">
<div class="container">
<ul class="orange-header-list">
<li class="nav-item"><a class="nav-link" href="#">Request Info</a></li>
<li class="nav-item"><a class="nav-link" href="#">Visit</a></li>
<li class="nav-item"><a class="nav-link" href="#">Apply</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Sticky Header -->
</header>
<!-- Header Section End -->
<!-- Main Content Body -->
<main>
<!--Slider -->
<section class="slider-wrapper" id="main-slider-wrapper">
<section class="banner">
<div class="single-title-wrapper">
<div class="container">
<h1 class="single-title-heading">Department Secondary Page</h1>
</div>
</div>
</section> <!-- Breadcrumb -->
<div class="breadcrumb-wrapper">
<div class="container">
<ul class="list-unstyled">
<li class="crumb-item">
<a class="link-text" href="index.html">Home</a>
<span class="breadcrumb-divider"> / </span>
<span class="unlink-text">Department Secondary Page</span>
</li>
</ul>
</div>
</div>
<!-- End Breadcrumb -->
</section>
<!-- End Slider -->
<section class="page-text-wrapper" id="skipToContent">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Lorem Ipsum </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna a porta lobortis.
Aliquam
sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur aliquet mattis elit. Mauris
eget velit bibendum, auctor risus eu, elementum sem. Fusce magna neque, bibendum in efficitur ut,
elementum
non risus. Aenean vitae elementum risus. Donec ut sollicitudin nisl. Pellentesque vehicula eu neque ut
iaculis. Phasellus dignissim augue in lorem pharetra dictum. Fusce pellentesque ut ipsum quis malesuada.
Duis eu ipsum eget neque vehicula hendrerit id eu libero.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna a porta lobortis.
Aliquam
sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur aliquet mattis elit. Mauris
eget velit bibendum, auctor risus eu, elementum sem. Fusce magna neque, bibendum in efficitur ut,
elementum
non risus.</p>
</div>
</div>
<div class="row pt-3">
<div class="col-xxl-5 col-xl-5 col-lg-6 col-md-6 col-sm-12">
<h2 class="h3 orange-a11y">Lorem Ipsum </h2>
<ul class="ul-list">
<li>Written and oral communication and presentation skills</li>
<li> Analytical thinking and ability to interpret financial statements</li>
<li>Interpersonal relations and teamwork</li>
<li>Technological skills including Microsoft Excel</li>
<li>Command of generally accepted accounting principles</li>
</ul>
</div>
<div class="col-xxl-5 col-xl-5 col-lg-6 col-md-6 col-sm-12">
<h2 class="h3 orange-a11y">Lorem Ipsum </h2>
<ul class="ul-list">
<li>Auditing</li>
<li>Budget Analyst</li>
<li>Certified Public Accountant</li>
<li>Corporate Accountant</li>
<li>Comptroller/Controller</li>
<li>Forensic Accounting</li>
<li>International Accounting</li>
<li>Tax Manager</li>
</ul>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<div class="container">
<div class="medium-headline-component">
<h2>Medium Length Display Heading</h2>
</div>
<div class="medium-headline-table">
<table class="table-design">
<thead>
<tr>
<th scope="col">First Category Title</th>
<th scope="col">Second Category Title</th>
<th scope="col">Third Category Title</th>
<th scope="col">
<p>Heading in p tag</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Row One
</th>
<td>
<a href="#">Link<a>
</td>
<td>
<p>
<a class="orange-btn" href="#">Action</a>
<a class="blue-btn" href="#">Action</a>
<a class="grey-btn" href="#">Action</a>
</p>
</td>
<td>
Data
</td>
</tr>
<tr>
<th scope="row">
Row One
</th>
<td>
<a href="#">Link<a>
</td>
<td>
<p>
<a class="orange-btn" href="#">Action</a>
<a class="blue-btn" href="#">Action</a>
<a class="grey-btn" href="#">Action</a>
</p>
</td>
<td>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Provident porro saepe doloremque labore ipsum inventore recusandae voluptas aperiam, dolore non veniam iure adipisci ipsam laborum.</li>
<li>Provident laborum, obcaecati, alias deleniti consectetur harum voluptas exercitationem debitis molestias dolores nihil, quia a ratione repellat asperiores molestiae sed et aperiam aspernatur.</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">
<p>Heading in p tag</p>
</th>
<td>
Data
</td>
<td>
Data
</td>
<td>
Data
</td>
</tr>
<tr>
<td>
Row Four
</td>
<td>
Data
</td>
<td>
Data
</td>
<td>
Data
</td>
</tr>
</tbody>
</table>
</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 class="orange-action-btn">
<a href="#" class="action-btn"> Last Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</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 Headline</h2>
<div class="paragraph-text">
<h3 class='h5'>Some heading</h3>
<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>
<div class='row'>
<div class='col'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</div>
</div>
</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 Headline</h2>
<h3 class="h4">Test Subheader</h3>
<div class="paragraph-text">
<h3 class='h5'>Some heading</h3>
<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>
<div class='row'>
<div class='col'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor</div>
</div>
</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="blockquote-wrapper pt-5 pb-5">
<div class="container">
<div class="blockquote-heading">
<h3>A True Learning Community</h3>
</div>
<div class="image-content-wrapper">
<div class="row align-items-center">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="image_wrapper">
<img class="clip-mask-top-right" src="../../college-dls/college/images/true-learning-community.png" alt="Community Image">
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="image-right-content">
<figure>
<blockquote class="blockquote">“Lorem ipsum dolor sit amet,
consectetur
adipiscing elit. Maecenas tincidunt urna a porta lobortis. Aliquam sit amet eros quam.”
</blockquote>
<footer class="blockquote-footer"><strong>Jane Doe,</strong> Alumni, Alvarez School of Business 2019</footer>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ENROLLMENT CTA -->
<!-- Roadrunner Section -->
<section class="enrollment-wrapper" style="background-image: url('../../college-dls/utsa/images/Future-Roadrunner.png');">
<div class="container">
<div class="enrollment-content">
<span class="h5">Become a</span>
<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 Now <i class="fas fa-arrow-right"></i></a> </div>
</div>
</div>
</div>
</div>
</section>
<!--End Roadrunner 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>
<!-- End Main Content Body -->
<!-- Footer -->
<footer id="footer">
<div class="container secondary-footer">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 pb-4">
<div class="pb-3 footer-logo">
<a href="https://www.utsa.edu/">
<img src="../../college-dls/utsa/images/ut-san-antonio-horizontal-ow.svg" height="32px" width="auto" alt="UT San Antonio" />
</a>
</div>
<div class="footer-text">
<p>One UTSA Circle San Antonio, TX 78249</p>
<p>Information: <a href="tel:+12104584011">210-458-4011</a></p>
</div>
</div>
<div class="col-sm-12 col-lg-8">
<div class="secondary-footer-social">
<a class="facebook" href="https://facebook.com/utsa" aria-label="UT San Antonio on Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
<a class="twitter" href="https://x.com/utsa" aria-label="UT San Antonio on Twitter"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i></a>
<a class="youtube" href="https://youtube.com/user/utsa" aria-label="UT San Antonio on YouTube"><i class="fab fa-youtube" aria-hidden="true"></i></a>
<a class="linkedin" href="https://linkedin.com/school/the-university-of-texas-at-san-antonio/" aria-label="UT San Antonio on Linkedin"><i class="fab fa-linkedin" aria-hidden="true"></i></a>
<a class="instagram" href="https://instagram.com/utsa/" aria-label="UT San Antonio on Instagram"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>
<nav class="secondary-footer-links">
<ul class="list-unstyled">
<li>
<a href="https://utsa.edu/about/careers#_ga=2.180574631.1891322053.1753909729-1983867998.1741794788">Careers</a>
</li>
<li>
<a href="https://map.utsa.edu">Campus Map</a>
</li>
<li>
<a href="https://utsa.edu/about/directories">Directories</a>
</li>
<li>
<a href="https://utsa.edu/about/university-organization">University Organization</a>
</li>
</ul>
</nav>
</div>
</div>
<hr>
<div class="copyright-subfooter">
<div class="row">
<div class="col-sm-12">
<nav class="subfooter-links">
<ul class="list-unstyled">
<li class="nav-item">
<div class="utsa-copyright">© 2025 The University of Texas at San Antonio
</div>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/ba-administration-operations/services/risk-emergency-management/business-continuity-emergency-management/emergency-response-guide.html" id="s-footer-response-guide">Emergency Response Guide</a>
</li>
<li class="nav-item">
<a href="https://utsa.edu/policies" id="s-footer-policies">Policies</a>
</li>
<li class="nav-item">
<a href="https://utsa.edu/policies/accessibility" id="s-footer-web-accessibility">Web
Accessibility</a>
</li>
<li class="nav-item">
<a href="https://utsa.edu/policies/reqlinks.html" id="s-footer-required-links">Required
Links</a>
</li>
<li class="nav-item">
<a href="https://utsystem.edu/" id="s-footer-ut-system">UT System</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!--End Footer -->
</div>
/* components/03-example-pages/02-department-home-page/department-home-page.scss */
/* BEGIN department-home-page.scss */
@include media-breakpoint-up(xl) {
.find-program-text {
width: 100%;
max-width: 439px;
}
}
/* END department-home-page.scss */
<div id="body-wrapper">
<div id="skip-content"><a class="Skip-btn" href="#skipToContent">Skip To Main Content</a></div>
<!-- Header Section -->
<header id="header" class="main-header sticky-header">
{{ render '@global-header--rebrand' }}
{{ render '@site-navigation' }}
</header>
<!-- Header Section End -->
<!-- Main Content Body -->
<main>
<!--Slider -->
<section class="slider-wrapper" id="main-slider-wrapper">
{{> @banner--slim}}
{{> @breadcrumb }}
</section>
<!-- End Slider -->
<section class="page-text-wrapper" id="skipToContent">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Lorem Ipsum </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna a porta lobortis.
Aliquam
sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur aliquet mattis elit. Mauris
eget velit bibendum, auctor risus eu, elementum sem. Fusce magna neque, bibendum in efficitur ut,
elementum
non risus. Aenean vitae elementum risus. Donec ut sollicitudin nisl. Pellentesque vehicula eu neque ut
iaculis. Phasellus dignissim augue in lorem pharetra dictum. Fusce pellentesque ut ipsum quis malesuada.
Duis eu ipsum eget neque vehicula hendrerit id eu libero.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna a porta lobortis.
Aliquam
sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur aliquet mattis elit. Mauris
eget velit bibendum, auctor risus eu, elementum sem. Fusce magna neque, bibendum in efficitur ut,
elementum
non risus.</p>
</div>
</div>
<div class="row pt-3">
<div class="col-xxl-5 col-xl-5 col-lg-6 col-md-6 col-sm-12">
<h2 class="h3 orange-a11y">Lorem Ipsum </h2>
<ul class="ul-list">
<li>Written and oral communication and presentation skills</li>
<li> Analytical thinking and ability to interpret financial statements</li>
<li>Interpersonal relations and teamwork</li>
<li>Technological skills including Microsoft Excel</li>
<li>Command of generally accepted accounting principles</li>
</ul>
</div>
<div class="col-xxl-5 col-xl-5 col-lg-6 col-md-6 col-sm-12">
<h2 class="h3 orange-a11y">Lorem Ipsum </h2>
<ul class="ul-list">
<li>Auditing</li>
<li>Budget Analyst</li>
<li>Certified Public Accountant</li>
<li>Corporate Accountant</li>
<li>Comptroller/Controller</li>
<li>Forensic Accounting</li>
<li>International Accounting</li>
<li>Tax Manager</li>
</ul>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container">
{{ render '@table--striped'}}
</div>
</section>
{{ render '@call-to-action-buttons--blue-2up'}}
{{ render '@call-to-action-media--left'}}
{{ render '@call-to-action-media'}}
{{ render '@blockquote--image-heading'}}
<!-- ENROLLMENT CTA -->
{{ render '@enrollment-call-to-action' }}
<!-- END CTA -->
</main>
{{ render '@back-to-top' }}
<!-- End Main Content Body -->
{{ render '@global-footer--rebrand-secondary' }}
</div>