Skip to content

Style Helpers

While the university’s web templates help achieve a level of consistency across the multitude of campus websites, they also allow for quite a bit of customization.

Below are instructions to help you customize the presentation of your website’s content.

Lede-ing with style

lede

<p class="lead">You can have a lede that is a wee bit different from the text that follows. It can be kinda nice, I suppose if you need it. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium.</p>


Accordion folds

accordion

<div class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>

</div>


Accordion Folds Hide Content

Be aware that content within them may be missed by a casual viewer. They are best used in cases where the content is long and a user needs to choose the one piece of information that is relevant to them.

Highlight boxes

highlight

<div class="box-light">

<p><strong>Highlight box</strong></p>

<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilita; de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>

<p><a href="http://www.google.com">This is a link</a></p>

</div>


Accessibility Note

Be aware that some color combinations do not meet minimum contrast guidelines (AA conformance level) established by Web Content Accessibility Guidelines (WCAG). Some colors—such as “orange”—will appear with a white background, but the border will become orange.

Adding color to boxes

Simply add the color class to the <div>.

As a reminder, our brand colors are:

  • Orange
  • Limestone
  • Smokey
  • Torch
  • River
  • Rock
  • Eureka
  • Switchgrass
  • Valley
  • LeConte
  • Summitt
  • Globe
  • Sunsphere
  • Regalia
  • Legacy
  • Buckskin
  • Energy
  • Fountain

<div class="box-light eureka">


Tabs in the content

tabs

<div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

</div>


Tabs Hide Content

Be aware that content within them may be missed by a casual viewer. They are best used in cases where the content is long and a user needs to choose the one piece of information that is relevant to them.

Columns in the content

columns

<div class="half">

...

</div>

<div class="half">

...

</div>

<br class="clear">


Columns in threes

thirds

<div class=”one-third column”>

...

</div>

<div class=”one-third column”>

...

</div>

<div class=”one-third column”>

...

</div>

<br class=”clear”>


Columns in fours

fourths

<div class=”one-fourth column”>

...

</div>

<div class=”one-fourth column”>

...

</div>

<div class=”one-fourth column”>

...

</div>

<div class=”one-fourth column”>

...

</div>

<br class=”clear”>


The flagship campus of the University of Tennessee System and partner in the Tennessee Transfer Pathway.