More button examples on developer.ucsd.edu

<a href="#" class="btn btn-primary">Primary button</a>
<a href="#" class="btn btn-default">Default button</a>

<div id="give-now1">
<a id="nav-give" href="/giving/index" class="give-button">
<span>give now</span>
</a>
</div>
<div class="clearfix"></div>

Branded colors

<a href="#" class="btn btn-ucsd-primary-color">Primary Color</a>
<a href="#" class="btn btn-ucsd-primary-neutral">Neutral</a>
<a href="#" class="btn btn-ucsd-highlight">Highlight</a>

These are available helper classes. There is currently no style guide for how colors are used other than what's available on the campus branding guidelines. However, we have documented some web accessible color combos for our BioSci Colors

Text

BioSci

.text-bio-blue

.text-bio-green

.text-bio-cyan

Campus

.text-ucsd-primary-color

.text-ucsd-primary-gray

.text-ucsd-secondary-navy

.text-ucsd-secondary-highlight

.text-ucsd-secondary-accent

.text-ucsd-neutral-black

.text-ucsd-neutral-gray

Background

BioSci

Campus

Usage

Callouts are generally used to indicate the type of action or an expected step to the user.

It's more specific than a button.

It should not be used to convey status or importance. A more appropriate element would be an alert.

Scenarios

Inquiries and Questions

<div class="callout callout-questions">
Questions? Contact Clark Kent at <a href="#">ckent@ucsd.edu</a>
</div>

Get more information

Note: This is not used often. It can be used if the User is essentially expected to take this action.

<a class="callout callout-information" href="/index">
Here is more information
</a>

Download a file

<a class="callout callout-download" href="http://bobsburgers.com">
Download this thing
</a>

Application or Registration

<a class="callout callout-apply" href="http://bobsburgers.com">
Register for the info session
</a>

Closed Registration

<a class="callout callout-apply-not-open" href="http://bobsburgers.com">
Register for the info session
</a>

<div class="framed large">
  <img alt="hornet" src="../_images/news/2013/100413hornet.jpg" />
  <p class="caption">The small...</p>
  <p class="credit">Image by Ken Tan</p>
</div>

The smaller hornet studied by the researchers attacks a honeybee forager on a flower.

Image by Ken Tan

Dolcelatte cheesecake gouda. Cheddar bavarian bergkase red leicester cauliflower cheese fromage lancashire smelly cheese cheese strings. Blue castello hard cheese cow mozzarella the big cheese feta cow fromage. The big cheese queso brie boursin brie melted cheese ricotta red leicester. Cream cheese taleggio cheesecake melted cheese queso who moved my cheese say cheese feta. Fondue cheesy feet gouda cheesy feet cheesecake croque monsieur boursin parmesan. Who moved my cheese squirty cheese cheese on toast when the cheese comes out everybody's happy emmental brie fromage cheese on toast. When the cheese comes out everybody's happy cheese strings rubber cheese edam the big cheese cheese and biscuits pepper jack halloumi. Queso airedale who moved my cheese cheeseburger cheese and wine stinking bishop jarlsberg fromage frais. Croque monsieur halloumi cheese on toast cheese and biscuits blue castello swiss cheese slices mascarpone. Pepper jack swiss dolcelatte blue castello.

<div class="framed left">
  <img alt="hornet" src="../_images/news/2013/100413hornet.jpg" />
  <p class="credit">Image by Ken Tan</p>
</div>

Image by Ken Tan

Cheese strings roquefort manchego. Edam croque monsieur goat everyone loves cheddar stilton chalk and cheese st. agur blue cheese. Hard cheese boursin cauliflower cheese emmental cheesecake fromage frais cheesy grin squirty cheese. Caerphilly lancashire danish fontina cheese triangles cheese on toast smelly cheese goat ricotta. Cheese and biscuits chalk and cheese everyone loves say cheese danish fontina camembert de normandie everyone loves taleggio. Everyone loves airedale cheese and wine cheesy feet paneer feta stinking bishop emmental. Chalk and cheese cheese strings monterey jack jarlsberg swiss fondue cottage cheese cut the cheese. Parmesan cheesy feet manchego cheddar hard cheese manchego cheeseburger squirty cheese. Port-salut fromage lancashire bocconcini danish fontina halloumi cheese and wine cheesy feet. Goat mascarpone port-salut cheesecake airedale lancashire rubber cheese when the cheese comes out everybody's happy. Hard cheese cheese and biscuits brie when the cheese comes out everybody's happy melted cheese gouda.

<div class="framed small">
  <img alt="hornet" src="../_images/news/2013/100413hornet.jpg" />
  <p class="caption">The small...</p>
</div>

The smaller hornet studied by the researchers attacks a honeybee forager on a flower.

Everyone loves cheesecake mozzarella. Pepper jack cheese on toast emmental cottage cheese pepper jack bocconcini parmesan everyone loves. When the cheese comes out everybody's happy cheesy grin cheese triangles lancashire manchego port-salut edam brie. Mascarpone mozzarella smelly cheese cheese and wine brie lancashire squirty cheese mozzarella. Cheddar halloumi melted cheese paneer st. agur blue cheese croque monsieur macaroni cheese paneer. Edam cheese triangles roquefort airedale pecorino bocconcini cheese and wine bavarian bergkase. Feta cauliflower cheese cheesy grin swiss melted cheese melted cheese smelly cheese stilton. Bavarian bergkase lancashire cheese triangles lancashire danish fontina cream cheese jarlsberg feta. Squirty cheese hard cheese babybel croque monsieur cream cheese cheeseburger stilton cut the cheese. Rubber cheese babybel cheeseburger mascarpone macaroni cheese lancashire boursin bavarian bergkase. Cheesy grin who moved my cheese goat macaroni cheese bocconcini gouda boursin.

<div class="framed full">
  <img alt="hornet" src="../_images/news/2013/100413hornet.jpg" />
  <p class="caption">The small...</p>
  <p class="credit">Image by Ken Tan</p>
</div>

The smaller hornet studied by the researchers attacks a honeybee forager on a flower.

Image by Ken Tan

Fondue chalk and cheese cheese and wine. Cow cream cheese caerphilly taleggio who moved my cheese blue castello feta when the cheese comes out everybody's happy. Croque monsieur cheesecake feta halloumi pecorino chalk and cheese camembert de normandie cheese and biscuits. Goat parmesan blue castello melted cheese blue castello camembert de normandie mascarpone blue castello. Cut the cheese cream cheese taleggio squirty cheese cheese and wine cheese triangles cheesy feet who moved my cheese. Fondue hard cheese macaroni cheese smelly cheese cheese slices manchego cheese on toast halloumi. Cheese slices blue castello halloumi bavarian bergkase cow monterey jack cream cheese lancashire. Pepper jack cauliflower cheese stinking bishop cheese slices cheese on toast cream cheese gouda melted cheese. Cream cheese cheese slices boursin cheesy feet cut the cheese everyone loves danish fontina.

Brie lancashire goat. Lancashire melted cheese bocconcini dolcelatte emmental jarlsberg cheddar blue castello. Chalk and cheese babybel ricotta edam everyone loves mascarpone port-salut rubber cheese. Croque monsieur say cheese stinking bishop jarlsberg cream cheese cauliflower cheese airedale mascarpone. Caerphilly cauliflower cheese cheese on toast danish fontina cheesy feet paneer queso cheesy grin. Halloumi croque monsieur cottage cheese cheese strings mascarpone babybel cheesy grin airedale. Smelly cheese cauliflower cheese cheesy feet when the cheese comes out everybody's happy stinking bishop fondue goat dolcelatte. Gouda edam cut the cheese lancashire paneer cauliflower cheese camembert de normandie goat. Cut the cheese brie cauliflower cheese pecorino stinking bishop danish fontina emmental airedale. Macaroni cheese manchego say cheese fromage frais cheese strings.

Nothing too interesting

Peter Parker

To force an element (or group of elements) to clear itself, just wrap it in a div with the class "group"

<div class="group">
<div class="insetimage onright">
  <img alt="#" src="#" width="375" />
   <div class="caption" style="width: 375px;">Caption here</div>
  <div class="credit" style="width: 375px;">Credit here</div>
</div>
</div>

Example: Disposal and Decontamination

When appropriate, we want to visually indicate what a link does when a user clicks on it. This is particularly helpful when we have a collection of links that behave in different ways like in the example above.

Make sure that the link text is actionably descriptive. Descriptions like "read here" and "click here" are not meaningful. There is more information in this Berkeley article. It's also important to make sure that the link itself is not the text.

Files automated

The superscript tag at the end of a link indicates a particular file type.

<a href="#.pdf">My PDF <sup>[PDF]</sup> </a>

<a href="#.xls">My Excel File <sup>[EXCEL]</sup> </a>

Email automated

Emails will always be formatted with the address clearly shown so that it's clear to users what behavior to expect when clicking an email link.

<a href="mailto:person@biology.ucsd.edu">person@biology.ucsd.edu</a>

Secured Links

If a user is going to be asked to provide credentials to access a resources, you may want to indicate that, too, if it's not obvious through context.

<a href="https://dbsportal.ucsd.edu/protectedinfo/portal">Faculty Portal</a> (login required)

Making Repeated Link Text Web Accessible

There are special circumstances when you want to have links with the same text that go to different pages or sites. An example of this may be in the faculty photo grid where each item has a link called 'Lab' but the link goes to the respective member's lab site.

Normally, this would cause an issue for people using screen readers, because a person scrolling through page links would only have the link text read to them with no indication of where that link goes and how it's distinguished from other links with the same name.

In cases where multiple links with the same name is appropriate (usually for visual reasons), you can apply the screen-reader-only class to a span tag inside the anchor tag. This can be used in any order inside the anchor.

Note on phrasing:The description in the span element with screen-reader-only class is read aloud in addition to the remainder of the text in the anchor tags. Use a space where appropriate and read the entire anchor text to make sure the phrasing makes sense. In the example below, the screen reader will read the text as "this will be read in addition to the visable description". 

Example

<a href="#"><span class="screen-reader-only">this will be read in addition to the </span>visable description</a>

Example: Default Table Setup, Labs Interested in BSMS (high customization)

This style is the same as the current "styled" campus table. To add the sorter, you'll need to import the tablesorter library which is already configured as block-content under Biology/block-content/resources. Add a table id (otherwise optional) and the script below. Refer to the jquery tablesorter documentation for further instructions on customization. 

Highly customized sorts can be added as page-level scripts. Otherwise, a default sort is available as block-content in the same location as the library. 

<div class="table-responsive">
    <table class="tablesorter" id="example">
     <caption> </caption>
     <thead>
      <tr>
       <th> </th>
       <th> </th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td> </td>
       <td> </td>
      </tr>
     </tbody>
    </table>
</div>

Script

<script type="text/javascript">
$(document).ready(function() {
 $("#example").tablesorter( {sortList: [[0,0], [1,0]]} );
});
</script> 

Example: Publications

Tabs cannot be used in drawers because they don't display well.

Update Sept 2020
We now only use bootstrap v3 tabs on the website instead of our previous custom style. Only markup is required since scripts are imported with the campus cdn. 

Tooltips can be embedded into text. You can put HTML in them as well!

Or made to look like buttons

<a rel="tooltip" src="#" title="and these tooltips are touch-friendly!"/>embedded into text</a>.

Image grid

Image grids are grids of headshots with a small description underneath. Used in academic section faculty lists and diversity committee pages.

Example: CDB faculty

• 

  Raffi Aroian
  Professor
  Aroian Lab

• 

  Eric Bennett
  Assistant Professor
  Bennett Lab

• 

  Ethan Bier
  Professor
  Bier Lab

• 

  Steven Briggs
  Distinguished Professor
  Briggs Lab

<ul class="img-grid">
  <li>
     <img alt="Raffi Aroian" src="/_images/research/academic-sections/cdb/faculty/aroian-raffi.jpg" />
    <p>
       <a href="#" title="Raffi Aroian Faculty Profile"><strong>Raffi Aroian</strong></a> <br /> 
       Professor <br /> 
        <a href="#" title="Aroian Lab website">Aroian Lab</a>
     </p>
  </li>
</ul>

Poster grid

Grids of posters with a small description underneath. Used on lecture series pages.

Example: Kuffler Lecture Series

• 

  Martin Raff

  2004
  Regulation of Mammalian Neural Development

• 

  Eric R. Kandel

  2003
  Molecular Biology of Memory Storage

• 

  Solomon H. Snyder

  2002
  Novel Neural Messengers

• 

  Charles F. Stevens

  2001
  Synapses and Circuits

<ul class="img-grid posters">
    <li>
      <a title="Kuffler Lecture 2004" rel="lightbox-journey" href="/render/file.act?path=/_images/kuffler/posters/kuffler2004.jpg">
        <img title="Kuffler Lecture 2004" src="/_images/kuffler/posters/thumbs/kuffler2004.gif" />
      </a>
      <h5>Martin Raff</h5>
      <h6>2004<h6>
      <span>Regulation of Mammalian Neural Development</span>
    </li>
  </ul>

A block with an image on the left side, and a description to the side.

Profile block: Person

Example: Faculty Awards, Dean's Leadership Council

• 

  Richard Atkinson, PhD, president emeritus of the University of California and professor emeritus of cognitive science and psychology at the University of California, San Diego, served as president of the UC system from 1995 to 2003. Before becoming president he served for fifteen years as chancellor of UC San Diego. He is a former director of the National Science Foundation and was a long-term member of the faculty at Stanford University.

Profile block: News

Example: Recent News, Videos

• 

  May 22 2017

  Study Finds Bacteria Living in Marine Sponge Produce Toxic Flame Retardant-Like Compounds

  A Scripps Institution of Oceanography at the University of California San Diego-led research team, along with scientists in the UC San Diego Division of Biological Sciences, discovered for the first time that a common marine sponge hosts bacteria that specialize in the production of toxic compounds nearly identical to man-made fire retardants.

  Watch on YouTube Read article

Three Column Card Layout

Use cards to create groups, focus user attention and organize elements on a page. They are used on landing pages to help guide users to information on sub-pages.

V5 Style

<div class="card-container card-container-v5 bg-image-1">
  <h2 class="card-container-title">Container Title</h2>
  <div>
    <h3><a href="#"> <i aria-hidden="true" class="fa fa-cogs fa-2x"></i> Tricycles </a></h3>
    <p>Also known as a trike</p>
  </div>
  <div>
    <h3><a href="#"> <i aria-hidden="true" class="fa fa-bicycle fa-2x"></i> Bicycles </a></h3>
    <p>Two-peddle power!</p>
  </div>
  <div>
    <h3><a href="#"> <i aria-hidden="true" class="fa fa-cog fa-2x"></i> Unicycles </a></h3>
    <p>Got skills?</p>
  </div>
</div>

Classic Style (Deprecated)

<div class="card-container">
  <div>
    <h3><a href="#"> <i aria-hidden="true" class="fa fa-cogs fa-2x"></i> Tricycles </a></h3>
    <p>Also known as a trike</p>
  </div>
  <div>
    <h3><a href="#"> <i aria-hidden="true" class="fa fa-bicycle fa-2x"></i> Bicycles </a></h3>
    <p>Two-peddle power!</p>
  </div>
  <div>
    <h3><a href="#"> <i aria-hidden="true" class="fa fa-cog fa-2x"></i> Unicycles </a></h3>
    <p>Got skills?</p>
  </div>
</div>

Emails

See the Email section under the Links drawer on this page.

Phone Numbers

Style is derived from the UC San Diego Editorial Style Guide Telephone Number.

858-534-4444

Basic Contact Block

King Triton

Messenger of the Sea

ktriton@ucsd.edu

UC San Diego

858-534-4444

Uses a description list tag:

<dl>
  <dt>King Triton</dt>
  <dd class="contact-title">Messenger of the Sea</dd>    
  <dd><a href="mailto:#">ktriton@ucsd.edu</a></dd>
  <dd>UC San Diego</dd>
  <dd>858-534-4444</dd>
</dl>   

Contact & Description List

<div class="contact-description-list">
  <h3 class="contact-description-list-header">Sea Gods</h3>
  <div>
    <dl>
      <dt>King Triton</dt>
      <dd class="contact-title">Messenger of the Sea</dd>    
      <dd><a href="mailto:#">ktriton@ucsd.edu</a></dd>
      <dd>The Ocean</dd>
      <dd>858-534-4444</dd>
    </dl>  
    <span>Uses trumpet conch shells to control sea waves. </span>
  </div>
  <div>
    <dl>
      <dt>Poseidon</dt>
      <dd class="contact-title">God of the Sea, Earthquakes, and Horses</dd>    
      <dd><a href="mailto:#">poseidon@ucsd.edu</a></dd>
      <dd>Urey Hall 1810</dd>
      <dd>858-534-5555</dd>
    </dl>  
    <span>Protects seafarers and Hellenic cities and colonies.</span>
  </div>
</div>

Contact & Contact List

<div class="contact-contact-list">
  <h3 class="contact-description-list-header">Sea Gods and Creatures</h3>
  <div>
    <dl>
      <dt>King Triton</dt>
      <dd class="contact-title">Messenger of the Sea</dd>    
      <dd><a href="mailto:#">ktriton@ucsd.edu</a></dd>
      <dd>Seashell Bay</dd>
      <dd>858-534-4444</dd>
    </dl>   
    <dl>
      <dt>Poseidon</dt>
      <dd class="contact-title">God of the Sea, Earthquakes, and Horses</dd>    
      <dd><a href="mailto:#">poseidon@ucsd.edu</a></dd>
      <dd>The Sea</dd>
      <dd>858-534-5555</dd>
    </dl>  
  </div>
  <div>
    <dl>
      <dt>Hippocampus</dt>
      <dd class="contact-title">Sea Horse</dd>    
      <dd><a href="mailto:#">hippo@ucsd.edu</a></dd>
      <dd>Ocean Floor</dd>
      <dd>858-534-6666</dd>
    </dl>  
    <dl>
      <dt>Charybdis</dt>
      <dd class="contact-title">Sea Monster</dd>    
      <dd><a href="mailto:#">chary@ucsd.edu</a></dd>
      <dd>Strait of Messina</dd>
      <dd>858-534-7777</dd>
    </dl>  
  </div>  
</div>

A spinner can be used on pages that may require a temporary loading element.

You'll need to provide your own JS for hiding the element on load.

Loading...

<div class="text-center" id="spinner">
  <img alt="Loader" height="200" src="/_resources/css/_images/dna-spinner.svg" style="transform: rotate(135deg);" width="200" /<
</div>

<div>
  <a href="#" style="text-decoration: none;" title="Facebook">
    <svg
	xmlns="http://www.w3.org/2000/svg" height="35" viewbox="0 0 30 30" width="35">
      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" fill="#000000"></path>
    </svg>
  </a>
  <a href="#" style="text-decoration: none;" title="Twitter">
    <svg
	xmlns="http://www.w3.org/2000/svg" height="35" viewbox="0 0 30 30" width="35">
      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" fill="#000000"></path>
    </svg>
  </a>
  <a href="#" style="text-decoration: none;" title="YouTube">
    <svg
	xmlns="http://www.w3.org/2000/svg" height="35" viewbox="0 0 30 30" width="35">
      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.441 16.892c-2.102.144-6.784.144-8.883 0-2.276-.156-2.541-1.27-2.558-4.892.017-3.629.285-4.736 2.558-4.892 2.099-.144 6.782-.144 8.883 0 2.277.156 2.541 1.27 2.559 4.892-.018 3.629-.285 4.736-2.559 4.892zm-6.441-7.234l4.917 2.338-4.917 2.346v-4.684z" fill="#000000"></path>
    </svg>
  </a>
</div>