Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/behavior.html#tab-component
This component may be big enough to promote to a section component.
<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>
/* components/02-components/04-tab/tab.scss */
/* BEGIN tab.scss */
.nav-tabs-component .nav-tabs>li {
padding-left: 15px;
padding-right: 15px;
width: 48%;
}
.nav-tabs-component .nav-tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.tab-wrapper {
.tab-header .nav-tabs {
border: none;
}
.nav-tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.tab-header {
.nav-tabs>li>a {
background-color: $white-b;
display: block;
width: 100%;
padding: 8px 30px;
border-top: 5px solid $white-b;
font-size: 16px;
color: $blue;
font-weight: 600;
text-decoration: none;
height: 100%;
}
.nav-tabs>li>a.active {
border-top: 6px solid $orange;
background-color: $white-b;
}
}
.tab-headline {
margin-bottom: 41px;
}
.tab-content {
background-color: $white-b;
.tab-body-content {
padding: 1.5rem;
width: 100%;
}
}
@include media-breakpoint-up(md) {
.tab-header .nav-tabs>li {
margin-right: 5px;
}
}
@include media-breakpoint-down(md) {
.tab-header .nav-tabs>li {
width: 100%;
background-color: $white-b;
}
}
@include media-breakpoint-down(lg) {
/* Behavior */
.tab-wrapper .tab-content {
padding-top: 30px;
padding-bottom: 30px;
}
.tab-wrapper .tab-content .tab-body-content {
padding-left: 0px;
max-width: 100%;
width: 100%;
}
/*End Behavior */
}
}
/* Dark Mode - Tabs */
@include color-mode(dark) {
.tab-wrapper {
.tab-header {
h2, .h2, h3, .h3 {
color:$orange;
}
}
.tab-content .tab-body-content {
p, code, a, h2, h3, h4, h5, h6, pre {
color: $blue;
}
ul li, ol li {
color: $blue;
}
.blue-btn{
color: $white;
&:hover{
color: $white;
}
}
.orange-btn{
color: $white;
&:hover{
color: $white;
}
}
}
}
}
/* Dark Mode - Tabs END */
/* END tab.scss */
<div class="tab-wrapper">
<div class="tab-header">
<h2 class="h3 blue mb-4">{{group-title}}</h2>
<ul class="nav nav-tabs" role="tablist">
{{#each tabs}}
{{#if @first}}
<li role="presentation"><a class="active" data-bs-toggle="tab" href="#{{id}}">{{title}}</a></li>
{{else}}
<li role="presentation"><a class="" data-bs-toggle="tab" href="#{{id}}">{{title}}</a></li>
{{/if}}
{{/each}}
<li role="presentation"><a class="" data-bs-toggle="tab" href="#tab-06">Resource List</a></li>
</ul>
</div>
<div class="tab-content">
{{#each tabs}}
<div id="{{id}}" class="tab-pane fade in {{#if @first}}active{{/if}} show">
<div class="card-body">
<div class="tab-body-content">
<h2>{{heading}} - 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>{{heading}} - 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>
{{/each}}
<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>