Content Library

This is reference page used for content found within the BUSFIN website. 

Sidebar Page Layout


<div class="row">
  <div class="col-lg-8">
    [Main Page Content]
  </div>
  <div class="col-lg-4">
    [Sidebar Content]
  </div>
</div>

List Columns

2 columns (desktop) / 1 columns (mobile)

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  
<ul class="col-2-1">
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
</ul>

3 columns (desktop) / 2 columns (mobile)

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  
<ul class="col-3-2">
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
</ul>

Accordions

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dolor non dolor feugiat commodo. Nunc sapien nunc, dignissim vitae justo a, laoreet sollicitudin felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id ipsum efficitur, rhoncus mauris ac, placerat tellus.

Learn more:

  • Link to related content on site
  • Link to related content on site
  • Link to related content on site

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dolor non dolor feugiat commodo. Nunc sapien nunc, dignissim vitae justo a, laoreet sollicitudin felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id ipsum efficitur, rhoncus mauris ac, placerat tellus.

Learn more:

Tabs

This is how to build a tab structure

CONTENT GOES HERE

CONTENT GOES HERE

THIS IS AN H3

CONTENT GOES HERE

CONTENT GOES HERE

  1. LIST ITEM
  2. LIST ITEM

<style type="text/css">.tab-header {
    color: #13294b;
    font-family: "Oswald", Helvetica, sans-serif;
    font-size: 15px;
    font-weight: normal;
    margin: 0.25em 0;
  }
  a.active .tab-header {
    color: #fff;
  }
</style>
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
	<li class="nav-item" role="presentation"><a aria-controls="tab-1-pane" aria-selected="true" class="nav-link active" data-bs-toggle="tab" href="#tab-1-pane" id="tab-1" role="tab">
	<h2 class="tab-header">Tab 1</h2>
	</a></li>
	<li class="nav-item" role="presentation"><a aria-controls="tab-2-pane" aria-selected="false" class="nav-link" data-bs-toggle="tab" href="#tab-2-pane" id="tab-2" role="tab">
	<h2 class="tab-header">Tab 2</h2>
	</a></li>
	<li class="nav-item" role="presentation"><a aria-controls="tab-3-pane" aria-selected="false" class="nav-link" data-bs-toggle="tab" href="#tab-3-pane" id="tab-3" role="tab">
	<h2 class="tab-header">Tab 3</h2>
	</a></li>
	<li class="nav-item" role="presentation"><a aria-controls="tab-4-pane" aria-selected="false" class="nav-link" data-bs-toggle="tab" href="#tab-4-pane" id="tab-4" role="tab">
	<h2 class="tab-header">Tab 4</h2>
	</a></li>
</ul>
<!-- Tab content, tab 1 -->

<div class="tab-content" id="myTabContent">
<div aria-labelledby="tab-1" class="tab-pane fade show active" id="tab-1-pane" role="tabpanel" tabindex="0">
<p class="mt-0">[CONTENT GOES HERE]</p>
</div>
<!-- tab 2 -->

<div aria-labelledby="tab-2" class="tab-pane fade" id="tab-2-pane" role="tabpanel" tabindex="0">
<p class="mt-0">[CONTENT GOES HERE]</p>
</div>
<!-- tab 3 -->

<div aria-labelledby="tab-3" class="tab-pane fade" id="tab-3-pane" role="tabpanel" tabindex="0">
<h3 class="mt-0">[THIS IS AN H3]</h3>

<p>[CONTENT GOES HERE]</p>
</div>
<!-- tab 4 -->

<div aria-labelledby="tab-4" class="tab-pane fade" id="tab-4-pane" role="tabpanel" tabindex="0">
<p class="mt-0">[CONTENT GOES HERE]</p>

<ol>
	<li>[LIST ITEM]</li>
	<li>[LIST ITEM]</li>
</ol>
</div>
</div>