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" aria-label="Global Navigation">
<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" aria-label="Main Navigation">
<!-- Main Header -->
<div id="main-header">
<div class="container">
<nav class="navbar navbar-stacked navbar-expand-md" aria-label="Top Navigation">
<a class="navbar-brand navbar-brand-stacked" href="#" aria-label="Logo Image">
<picture>
<source media="(max-width: 575.98px)" srcset="../../college-dls/college/images/logos/Klesse_Engineering_Integrated_Design_Type_2Line_Blu.svg" />
<source media="(max-width: 991.98px)" srcset="../../college-dls/college/images/logos/Klesse_Engineering_Integrated_Design_Type_1Line_Blu.svg" />
<img class="college-logo" width="100%" height="26px" alt="Full College Name Goes Here" src="../../college-dls/college/images/logos/Klesse_Engineering_Integrated_Design_Type_1Line_Blu.svg" />
</picture>
</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 aria-expanded="false" aria-haspopup="true" aria-label="Programs menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="programs">Programs</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Undergraduate-Programs" target="_parent">Undergraduate</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Masters-Programs" target="_parent">Master's Programs</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Doctoral-Programs" target="_parent">Doctoral Programs</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Certificate-Programs" target="_parent">Certificate Programs</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Concentrations" target="_parent">Concentrations</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Minors" target="_parent">Minors</a>
</div>
</li>
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="Faculty menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="faculty">Faculty</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://hcap.utsa.edu/faculty/index.html" target="_parent">Faculty</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/faculty/council/index.html" target="_parent">Faculty Council</a>
</div>
</li>
<li class="nav-item"><a aria-label="HCAP Research" class="nav-link" href="https://hcap.utsa.edu/research/index.html" target="_parent">Research</a></li>
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="Disciplines menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="disciplines">Disciplines</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://hcap.utsa.edu/criminal-justice/index.html" target="_parent">Criminology and Criminal Justice</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/kinesiology/index.html" target="_parent">Kinesiology</a>
<a aria-label="Nutrition and Dietetics" class="dropdown-item" href="https://hcap.utsa.edu/nutrition-and-dietetics/index.html" target="_parent">Nutrition and Dietetics</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/psychology/index.html" target="_parent">Psychology</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/public-administration/index.html" target="_parent">Public Administration</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/public-health/index.html" target="_parent">Public Health</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/social-work/index.html" target="_parent">Social Work</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/sociology-and-demography/index.html" target="_parent">Sociology and Demography</a>
</div>
</li>
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="Student Success menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="student-success">Student Success</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/index.html" target="_parent">Student Success Home</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/aid-scholarships.html" target="_parent">Awards, Aid and Scholarships</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/career-success.html" target="_parent">Career Success</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/academic-success.html" target="_parent">Academic Success</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/student-success-center.html" target="_parent">Student Success Center</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/timeline.html" target="_parent">Roadmap to Success</a>
</div>
</li>
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="News & Events menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="news--amp--events">News & Events</a>
<div class="dropdown-menu">
<a aria-label="College for Health, Community and Policy News" class="dropdown-item" href="https://hcap.utsa.edu/news/index.html" target="_parent">News</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/events/index.html" target="_parent">Events</a>
</div>
</li>
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="About menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="about">About</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://hcap.utsa.edu/about/index.html" target="_parent">About Us</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/about/deans-office.html" target="_parent">Leadership and Staff</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/about/meet-the-dean.html" target="_parent">Meet the Dean</a>
<a aria-label="Business Service Center" class="dropdown-item" href="https://hcap.utsa.edu/about/business-service-center/index.html" target="_parent">Business Service Center</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/about/contact-us.html" target="_parent">Contact Us</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/support-hcap/index.html" target="_parent">Support HCAP</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/about/adv-council.html" target="_parent">Dean's Advisory Council</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/about/restorative-practices.html" target="_parent">Restorative Practices</a>
</div>
</li>
<li class="nav-item mobile-nav-btns">
<a class="action-btn" href="https://hcap.utsa.edu/requestinfo.html" target="_parent">Request Info <i class="fas fa-arrow-right"></i></a>
<a class="action-btn" href="https://www.utsa.edu/visit/" target="_parent">Visit <i class="fas fa-arrow-right"></i></a>
<a class="action-btn" href="https://www.utsa.edu/admissions/" target="_parent">Apply <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 -->
<!-- Solving Grand Challenges -->
<div id="main" role="main">
<!--Slider -->
<section class="banner" id="banner-video">
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://future.utsa.edu/wp-content/uploads/utsa-website-header-02.mp4" />
</video>
<div class="container h-100">
<div class="row d-flex h-100 no-mrg align-items-center">
<div class="col-xxl-8 col-xl-8 col-lg-6 col-md-6 col-sm-12 p-0">
<div class="hero-banner-content">
<h1 class="banner-heading">Solving Grand Challenges</h1>
<p class="banner-description"></p>
<div class="banner-btns">
<a class="orange-btn" href="#" target="_parent">Go to programs</a>
</div>
</div>
</div>
</div>
<div class="video-Controls">
<button type="button" class="play-pause-btn" aria-label="Play or pause video" data-click="1">Pause Video
<span class="pause-icon"><i class="fal fa-pause"></i></span>
</button>
</div>
</div>
</section> <!-- End Slider -->
<div id="skipToContent"></div>
<!-- Call To Action - Buttons Only - No Image -->
<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>
<!-- End Call To Action -->
<!-- Call To Action - Button with Image -->
<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>
<!-- End Call To Action -->
</div>
<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>
<section class="site-footer grey-bg pt-5 pb-2" aria-label="Site Footer">
<div class="container">
<div class="row">
<!-- Logo Column -->
<div class="col-sm-12 col-md-4 pl-3 pt-2">
<a class="logo-footer" href="#" target="_parent">
<img alt="" class="img-fluid mb-4" src="../../college-dls/college/images/logos/Klesse_Engineering_Integrated_Design_Blu_Type_3Line 1.svg" />
</a>
<ul class="list-unstyled">
<li class="mb-2">Main Building, Suite 4.120</li>
<li class="mb-2">The University of Texas at San Antonio</li>
<li class="mb-2">One UTSA Circle</li>
<li class="mb-2">San Antonio, TX 78249</li>
<li class="mb-2">(210) 458-4110</li>
<li class="mb-2"><a href="mailto:your-college-email@utsa.edu">your-college-email@utsa.edu</a></li>
</ul>
</div>
<!-- Site Footer Content Column -->
<div class="col-sm-8 pr-3">
<h5 class="pb-2">Stay Connected to the School of Data Science</h5>
<!-- div class="col-lg global-footer-social text-xs-center text-lg-right pt-1"> -->
<div class="row pb-4" id="social-sidebar">
<div class="col-2 text-center mt-3">
<a aria-label="Label for Facebook" href="#facebook-link-goes-here">
<i aria-hidden="true" class="fab fa-facebook fa-2x utsa-social-circle text-center"></i>
</a>
</div>
<div class="col-2 text-center mt-3">
<a aria-label="Label for Twitter" href="#twitter-link-goes-here">
<i aria-hidden="true" class="fab fa-x-twitter fa-2x utsa-social-circle text-center"></i>
</a>
</div>
<div class="col-2 text-center mt-3">
<a aria-label="Label for Instagram" href="#insta-link-goes-here">
<i aria-hidden="true" class="fab fa-instagram fa-2x utsa-social-circle text-center"></i>
</a>
</div>
<div class="col-2 text-center mt-3">
<a aria-label="Label for YouTube" href="#yt-link-goes-here">
<i aria-hidden="true" class="fab fa-youtube fa-2x utsa-social-circle text-center"></i>
</a>
</div>
<!-- additional icons here as needed -->
</div>
<h5>Our Philosophy</h5>
<p>We practice a Facilitator Model in which staff partner with students
to make intelligent, fair, and reasonable choices within established
state, federal, and local laws, university rules and regulations, and
the educational mission of the institution.</p>
<h5>Mission Statement</h5>
<p>Student Activities helps students and student organizations get
involved with the UTSA community through campus-wide events,
traditions, workshops, training and development opportunities to
prepare for future success.</p>
<div class="pt-4 mb-2 pb-2 row">
<div class="offset-2 col-8"><a href="#"></a></div>
</div>
</div>
</div>
</div>
</section>
<!-- 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-sanantonio-reg-logo-web.svg" height="42px" 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/01-home-page/home-page.scss */
/* BEGIN home-page.scss */
/* END 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"}}
{{> '@site-navigation' navigation }}
</header>
<!-- Header Section End -->
<!-- Main Content Body -->
<!-- {{ banner.text }} -->
<div id="main" role="main">
<!--Slider -->
{{> '@banner--video' context=banner }}
<!-- End Slider -->
<div id="skipToContent"></div>
<!-- Call To Action - Buttons Only - No Image -->
{{render "@call-to-action-buttons--grey"}}
<!-- End Call To Action -->
<!-- Call To Action - Button with Image -->
{{render "@call-to-action-media"}}
<!-- End Call To Action -->
</div>
{{render "@back-to-top"}}
{{render "@site-footer" footer}}
<!-- End Main Content Body -->
{{render "@global-footer"}}
</div>