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">
<!-- Top Header -->
<div id="top-header">
<div class="top-header-left">
<a title="UTSA Home" href="https://www.utsa.edu">
<img width="250px" height="12px" class="logo-full d-none d-sm-block" src="../../college-dls/utsa/images/utsa-logo-full.svg" alt="The University of Texas at San Antonio" />
<img width="72px" height="25px" class="logo-short d-block d-sm-none" src="../../college-dls/utsa/images/utsa-logo.svg" alt="The University of Texas at San Antonio" />
</a>
</div>
<div class="top-header-right">
<form class="top-header-form">
<div class="language-select">
<label for="select-lang" class="d-none">Select Language</label>
<select id="select-lang" class="js-example-disabled-results" aria-labelledby="select-lang">
<option>Select Language</option>
<option>English</option>
</select>
</div>
<div class="myutsa-link">
<a title="MyUTSA" href="https://my.utsa.edu"><i class="fas fa-globe-americas"></i> <span class="myutsa-text">myUTSA</span></a>
</div>
<div class="search">
<button type="button" class="search-btn dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true">
<span class="search-icon"><i class="fas fa-search" aria-hidden="true"></i></span>
<span class="search-text">Search</span>
</button>
<div class="dropdown-menu " style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(274px, 122px, 0px);" data-popper-placement="bottom-end">
<label for="q" class="d-none">Search</label>
<input type="search" placeholder="Search" id="q" tabindex="0" onblur="if (this.value == '') {this.value = 'Search UTSA';}" onfocus="if (this.value == 'Search UTSA') {this.value = '';}" value="Search UTSA" />
<button type="submit" class="search-input-icon" aria-label="Search"><i class="fas fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
</div>
<!-- End Top Header -->
<!-- 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">Institute Home 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">Institute Home 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-xl-10 col-lg-10 col-md-12 col-sm-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>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-12 col-sm-12">
</div>
</div>
</div>
</section>
<section class="utsa-research-tabs">
<!-- Tab Component -->
<div class="container">
<div class="tab-component-sec">
<div class="tab-wrapper">
<div class="tab-header">
<h2 class="h3 blue mb-4">Tab Group Title</h2>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a class="active" data-bs-toggle="tab" href="#tab-01">Student Success Center</a></li>
<li role="presentation"><a class="" data-bs-toggle="tab" href="#tab-02">Lorem ipsum dolor sit</a></li>
<li role="presentation"><a class="" data-bs-toggle="tab" href="#tab-03">Fusce venenatis ipsum sit</a></li>
<li role="presentation"><a class="" data-bs-toggle="tab" href="#tab-04">This is a really long tab title</a></li>
<li role="presentation"><a class="" data-bs-toggle="tab" href="#tab-05">Short</a></li>
<li role="presentation"><a class="" data-bs-toggle="tab" href="#tab-06">Resource List</a></li>
</ul>
</div>
<div class="tab-content">
<div id="tab-01" class="tab-pane fade in active show">
<div class="card-body">
<div class="tab-body-content">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit - h2</h2>
<table class="table-design-blue">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Place</th>
<th scope="col">Speaker</th>
<th scope="col">Topic</th>
</tr>
</thead>
<tbody>
<tr>
<td>xx, 20yy <br> 9-10 AM</td>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th scope="row">xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th scope="row">xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
</tbody>
</table>
<p><a href="#">Lorem ipsum</a> 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>
<ul>
<li>Use the HTML <code><ol></code> element to define an ordered list</li>
<li>Use the HTML type attribute to define the numbering type</li>
<li>Use the HTML <code><li></code> element to define a list item</li>
<li>Lists can be nested</li>
<li>List items can contain other HTML elements</li>
</ul>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit - h3</h3>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> 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>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas tincidunt urna a porta
lobortis.</li>
<li>Aliquam sit amet eros quam.</li>
<li>Fusce venenatis ipsum non est porta porttitor.</li>
<li>Curabitur
aliquet mattis elit.</li>
</ol>
<pre>Mauris eget velit bibendum, auctor risus eu, elementum sem.</pre>
<p>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><a href="" class="orange-btn">Orange Button</a> <a href="" class="blue-btn">Blue Button</a></p>
</div>
</div>
</div>
<div id="tab-02" class="tab-pane fade in show">
<div class="card-body">
<div class="tab-body-content">
<h2>Maecenas tincidunt urna a porta lobortis - h2</h2>
<table class="table-design-blue">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Place</th>
<th scope="col">Speaker</th>
<th scope="col">Topic</th>
</tr>
</thead>
<tbody>
<tr>
<td>xx, 20yy <br> 9-10 AM</td>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th scope="row">xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th scope="row">xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
</tbody>
</table>
<p><a href="#">Lorem ipsum</a> 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>
<ul>
<li>Use the HTML <code><ol></code> element to define an ordered list</li>
<li>Use the HTML type attribute to define the numbering type</li>
<li>Use the HTML <code><li></code> element to define a list item</li>
<li>Lists can be nested</li>
<li>List items can contain other HTML elements</li>
</ul>
<h3>Maecenas tincidunt urna a porta lobortis - h3</h3>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> 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>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas tincidunt urna a porta
lobortis.</li>
<li>Aliquam sit amet eros quam.</li>
<li>Fusce venenatis ipsum non est porta porttitor.</li>
<li>Curabitur
aliquet mattis elit.</li>
</ol>
<pre>Mauris eget velit bibendum, auctor risus eu, elementum sem.</pre>
<p>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><a href="" class="orange-btn">Orange Button</a> <a href="" class="blue-btn">Blue Button</a></p>
</div>
</div>
</div>
<div id="tab-03" class="tab-pane fade in show">
<div class="card-body">
<div class="tab-body-content">
<h2>Aliquam sit amet eros quam. Fusce venenatis - h2</h2>
<table class="table-design-blue">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Place</th>
<th scope="col">Speaker</th>
<th scope="col">Topic</th>
</tr>
</thead>
<tbody>
<tr>
<td>xx, 20yy <br> 9-10 AM</td>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th scope="row">xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th scope="row">xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
</tbody>
</table>
<p><a href="#">Lorem ipsum</a> 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>
<ul>
<li>Use the HTML <code><ol></code> element to define an ordered list</li>
<li>Use the HTML type attribute to define the numbering type</li>
<li>Use the HTML <code><li></code> element to define a list item</li>
<li>Lists can be nested</li>
<li>List items can contain other HTML elements</li>
</ul>
<h3>Aliquam sit amet eros quam. Fusce venenatis - h3</h3>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> 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>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas tincidunt urna a porta
lobortis.</li>
<li>Aliquam sit amet eros quam.</li>
<li>Fusce venenatis ipsum non est porta porttitor.</li>
<li>Curabitur
aliquet mattis elit.</li>
</ol>
<pre>Mauris eget velit bibendum, auctor risus eu, elementum sem.</pre>
<p>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><a href="" class="orange-btn">Orange Button</a> <a href="" class="blue-btn">Blue Button</a></p>
</div>
</div>
</div>
<div id="tab-04" class="tab-pane fade in show">
<div class="card-body">
<div class="tab-body-content">
<h2>Aliquam sit amet eros quam. Fusce venenatis - h2</h2>
<table class="table-design-blue">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Place</th>
<th scope="col">Speaker</th>
<th scope="col">Topic</th>
</tr>
</thead>
<tbody>
<tr>
<td>xx, 20yy <br> 9-10 AM</td>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th scope="row">xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th scope="row">xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
</tbody>
</table>
<p><a href="#">Lorem ipsum</a> 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>
<ul>
<li>Use the HTML <code><ol></code> element to define an ordered list</li>
<li>Use the HTML type attribute to define the numbering type</li>
<li>Use the HTML <code><li></code> element to define a list item</li>
<li>Lists can be nested</li>
<li>List items can contain other HTML elements</li>
</ul>
<h3>Aliquam sit amet eros quam. Fusce venenatis - h3</h3>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> 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>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas tincidunt urna a porta
lobortis.</li>
<li>Aliquam sit amet eros quam.</li>
<li>Fusce venenatis ipsum non est porta porttitor.</li>
<li>Curabitur
aliquet mattis elit.</li>
</ol>
<pre>Mauris eget velit bibendum, auctor risus eu, elementum sem.</pre>
<p>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><a href="" class="orange-btn">Orange Button</a> <a href="" class="blue-btn">Blue Button</a></p>
</div>
</div>
</div>
<div id="tab-05" class="tab-pane fade in show">
<div class="card-body">
<div class="tab-body-content">
<h2>Maecenas tincidunt urna a porta lobortis - h2</h2>
<table class="table-design-blue">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Place</th>
<th scope="col">Speaker</th>
<th scope="col">Topic</th>
</tr>
</thead>
<tbody>
<tr>
<td>xx, 20yy <br> 9-10 AM</td>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th scope="row">xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th scope="row">xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
</tbody>
</table>
<p><a href="#">Lorem ipsum</a> 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>
<ul>
<li>Use the HTML <code><ol></code> element to define an ordered list</li>
<li>Use the HTML type attribute to define the numbering type</li>
<li>Use the HTML <code><li></code> element to define a list item</li>
<li>Lists can be nested</li>
<li>List items can contain other HTML elements</li>
</ul>
<h3>Maecenas tincidunt urna a porta lobortis - h3</h3>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> 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>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas tincidunt urna a porta
lobortis.</li>
<li>Aliquam sit amet eros quam.</li>
<li>Fusce venenatis ipsum non est porta porttitor.</li>
<li>Curabitur
aliquet mattis elit.</li>
</ol>
<pre>Mauris eget velit bibendum, auctor risus eu, elementum sem.</pre>
<p>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><a href="" class="orange-btn">Orange Button</a> <a href="" class="blue-btn">Blue Button</a></p>
</div>
</div>
</div>
<div id="tab-06" class="tab-pane fade in show">
<div class="card-body">
<div class="tab-body-content">
<h2 class="h3 mb-3">Resources List</h2>
<div class="col-12 col-md-6">
<ul class="resources-list">
<li><a href="#foo">Example Link Text One</a></li>
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="resources-list">
<li><a href="#foo">Example Link Text Two</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- end tab-06 -->
</div>
</div>
</div>
</div>
</section>
<section class="utsa-resources-sec">
<!-- Resourses Section -->
<div class="events-listing-sec">
<div class="container">
<!-- Resources List -->
<div class="resources-list-sec">
<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>
</div>
<!-- End Resources List -->
</div>
</div>
<!-- End Resourses Section -->
</section>
<section class="py-5 news3-card-layout-grey position-relative">
<div class="container">
<div class="news-card">
<div class="inner-sec-headings">
<h3 class="h4">Latest News</h3>
<a class="view-all-link" href="#">
Read All News Stories
<i class="fas fa-arrow-right"></i>
</a>
</div>
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card white-bg">
<div class="news-card-img">
<img width="325px" height="168px" src="../../college-dls/college/images/News_Blog.png" alt="Card Image" loading="lazy" />
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit</a>
<p class="published-status">Published by ASC Team</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card blue-bg">
<div class="news-card-img">
<img width="325px" height="168px" src="../../college-dls/college/images/News_Blog-1.png" alt="Card Image" loading="lazy" />
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit</a>
<p class="published-status">Published by ASC Team</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card white-bg">
<div class="news-card-img">
<img width="325px" height="168px" src="../../college-dls/college/images/News_Blog.png" alt="Card Image" loading="lazy" />
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit</a>
<p class="published-status">Published by ASC Team</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-5 events-listing-sec">
<div class="container">
<div class="inner-sec-headings">
<h2 class="blue fw-bold h4">Upcoming Events</h2>
<a class="view-all-link" href="#">View All Events<i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
<div class="event-horizontal-image">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12 g-0">
<div class="events-listing-img">
<img class="clip-mask-top-right" src="../../college-dls/college/images/Event-Listing-1.png" alt="Event Listing">
<div class="date-absolute">
<p class="months">APR - MAY</p>
<p class="months-date">29-3</p>
<p class="year">2021</p>
</div>
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="events-listing-content">
<a class="event-link-overlay" href="#" aria-label="Event Overlay"> </a>
<h3 class="h5">Lorem ipsum dolor sit amet</h3>
<p>6-8 PM, Location Name, Main Campus</p>
<div class="event-icon-container">
<div class="event-icon">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-horizontal-image">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12 g-0">
<div class="events-listing-img">
<img class="clip-mask-top-right" src="../../college-dls/college/images/Event-Listing-1.png" alt="Event Listing">
<div class="date-absolute">
<p class="months">APR - MAY</p>
<p class="months-date">29-3</p>
<p class="year">2021</p>
</div>
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="events-listing-content">
<a class="event-link-overlay" href="#" aria-label="Event Overlay"> </a>
<h3 class="h5">Lorem ipsum dolor sit amet</h3>
<p>6-8 PM, Location Name, Main Campus</p>
<div class="event-icon-container">
<div class="event-icon">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-horizontal-image">
<div class="container">
<div class="row align-items-center blue-bg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12 g-0">
<div class="events-listing-img">
<img class="clip-mask-top-right" src="../../college-dls/college/images/Event-Listing-1.png" alt="Event Listing">
<div class="date-absolute">
<p class="months">APR - MAY</p>
<p class="months-date">29-3</p>
<p class="year">2021</p>
</div>
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="events-listing-content">
<a class="event-link-overlay" href="#" aria-label="Event Overlay"> </a>
<h3 class="h5">Lorem ipsum dolor sit amet</h3>
<p>6-8 PM, Location Name, Main Campus</p>
<div class="event-icon-container">
<div class="event-icon">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-horizontal-image">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12 g-0">
<div class="events-listing-img">
<img class="clip-mask-top-right" src="../../college-dls/college/images/Event-Listing-1.png" alt="Event Listing">
<div class="date-absolute">
<p class="months">APR - MAY</p>
<p class="months-date">29-3</p>
<p class="year">2021</p>
</div>
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="events-listing-content">
<a class="event-link-overlay" href="#" aria-label="Event Overlay"> </a>
<h3 class="h5">Lorem ipsum dolor sit amet</h3>
<p>6-8 PM, Location Name, Main Campus</p>
<div class="event-icon-container">
<div class="event-icon">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</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">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="footer-logo">
<img width="231px" height="75px" alt="UTSA - Creating Bold Futures" src="../../college-dls/utsa/images/utsa-cbf.svg" />
</div>
<div class="footer-text">
<p>
<span class="footer-first-text">One UTSA Circle San Antonio, TX 78249</span>
<span class="footer-second-text">Information <a href="tel:+12104584011" class="">210-458-4011</a></span>
</p>
</div>
<div class="footer-social">
<a class="facebook" href="https://facebook.com/utsa" aria-label="Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
<a class="twitter" href="https://x.com/utsa" aria-label="Twitter"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i></a>
<a class="youtube" href="https://youtube.com/user/utsa" aria-label="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="Linkedin"><i class="fab fa-linkedin" aria-hidden="true"></i></a>
<a class="instagram" href="https://instagram.com/utsa/" aria-label="Instagram"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-2">
<ul class="list-unstyled">
<li class="nav-item">
<a href="https://www.utsa.edu/locations" id="s-footer-locations">Locations</a>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/visit" id="s-footer-visit" aria-label="Visit UTSA">Visit UTSA</a>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/today" id="s-footer-utsa-today">UTSA Today</a>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/jobs" id="s-footer-jobs">Jobs</a>
</li>
<li class="nav-item">
<a href="https://alerts.utsa.edu/utsa-community-emergency-response" id="s-footer-emergency-contacts">Emergency Contacts</a>
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6 col-lg-2">
<ul class="list-unstyled">
<li class="nav-item">
<a href="https://www.utsa.edu/directory" id="s-footer-directory">Directory</a>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/Compliance/Hotline.html" id="s-footer-report-fraud">Report
Fraud</a>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/eos/title-ix" id="s-footer-title-ix-reporting">Title IX
Reporting</a>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/ada" id="s-footer-ada-resources">ADA Resources</a>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/publicsafety/pd/clery_compliance" id="s-footer-clery-info">Clery
Information</a>
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<ul class="list-unstyled">
<li class="nav-item">
<a href="https://www.utsa.edu/remembrance" id="s-footer-rr-remembrance">Roadrunner
Remembrance</a>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/mental-health-resources" id="s-footer-mental-health">Counseling/Mental Health</a>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/heerf/#reports-disclosure" id="s-footer-cares-act-reports">CARES
Act Reports & Disclosure</a>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/hop/chapter9/9.24.html" id="s-footer-sexual-harassment">Sexual
Harassment and Sexual Misconduct Policy</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<hr />
</div>
</div>
</div>
<div class="copyright-subfooter">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="utsa-copyright">
<p>© 2024 The University of Texas at San Antonio</p>
</div>
</div>
<div class="col-sm-12 col-md-6">
<nav class="subfooter-links">
<ul class="list-unstyled">
<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/09-institute-home-page/institute-home-page.scss */
/* BEGIN news-page.scss */
@include media-breakpoint-up(xl) {
.resources-list-sec .resources-list {
width: 100%;
max-width: 485px;
}
}
/* END news-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' }}
{{ 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-xl-10 col-lg-10 col-md-12 col-sm-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>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-12 col-sm-12">
</div>
</div>
</div>
</section>
<section class="utsa-research-tabs">
<!-- Tab Component -->
<div class="container">
<div class="tab-component-sec">
{{!-- <div class="tab-headline">
<h4 class="h4 blue bold">Tab Headline</h4>
</div> --}}
{{ render '@tab' }}
</div>
</div>
</section>
<section class="utsa-resources-sec">
<!-- Resourses Section -->
<div class="events-listing-sec">
<div class="container">
<!-- Resources List -->
<div class="resources-list-sec">
{{!-- <div class="resources-subheading">
<h4>Resources</h4>
</div> --}}
{{ render '@link-list'}}
</div>
<!-- End Resources List -->
</div>
</div>
<!-- End Resourses Section -->
</section>
{{ render '@news-group'}}
{{ render '@event-list--image'}}
<!-- ENROLLMENT CTA -->
{{ render '@enrollment-call-to-action' }}
<!-- END CTA -->
</main>
{{ render '@back-to-top' }}
<!-- End Main Content Body -->
{{ render '@global-footer' }}
</div>