Skip to Content

Brand and Style Guide

Web Branding Components

Callouts

This is an information call out

HTML Code:

<div class="alert">
<div class="icon-info gray-victor">
<p> ... </p>
</div>
</div>

This is a succees alert

HTML Code:

<div class="alert">
<div class="icon-success gray-olmsted-green">
<p> ... </p>
</div>
</div>

This is a warning call out

HTML Code:

<div class="alert">
<div class="icon-warning gray-capen-brick">
<p> ... </p>
</div>
</div>

Web Icons

The icon set for University Libraries supported sites. The icon set is font based.

  • e928
  • e929
  • e927
  • e926
  • e925
  • e915
  • e919
  • e917
  • e91a
  • e91b
  • e92f
  • e930
  • e92e
  • e92d
  • e618
  • e619
  • 3c
  • 3e
  • e602
  • e924
  • e606
  • e608
  • e913
  • e604
  • e615
  • e904
  • e902
  • e905
  • e92a
  • e903
  • e906
  • e92b
  • e90c

Tables

Title Description
... ...

HTML Code:

<table class="basic">

<tr>
<th>Title</th>
<th>Description</th>
</tr>

<tr>
<td>...</td>
<td>...</td>
</tr>

</table>

Expandable Content

Equipment Loan Policies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum odio leo, a aliquam lorem suscipit vel. Donec sit amet euismod purus. Curabitur commodo eros aliquet ex tincidunt, quis fringilla nisl sodales. Aenean tristique lectus sed vehicula auctor. Etiam interdum elit vel feugiat semper

HTML Code:

<div class="accordion">
<span class="acc_trigger"><a href="#">Equipment Loan Policies</a></span>
<div class="acc_container">
<div class="block">

<p> ... </p>

</div>
</div>
</div>

Page list



HTML Code:


<ul class="pg-list">
<li><h2><a href="#">Link 1</a></li>
<li><h2><a href="#">Link 2</a></li>
<li><h2><a href="#">Link 3</a></li>
</ul>

Buttons

Large Button

Login 

<a href="#" class="lrg-btn">Login</a>


Form Button

Should be used for all forms



<input type="submit" name="submit" value="Submit Request" class="form-button">

Tabs


Tab 1 content

Tab 2 content


<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li>
<li role="presentation">
<a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
 
<div class="tab-content">
  
	<div role="tabpanel" class="tab-pane fade in active" id="tab1">
		<p>Tab 1 content</p>
	</div>
	
	<div role="tabpanel" class="tab-pane fade in" id="tab2">
		<p>Tab 2 content</p>
	</div>

</div>