BNL Home

Page Content Styles

Any of the HTML elements listed on this page may be used on BNL web pages. The standard BNL template styles will be applied automatically. Do not add any additional in-line styles to any BNL page element.

Extremely Important: Inline (element-level) style declarations are not to be used. Doing so will render the responsive (mobile) CSS stylesheets unable to properly style the element on mobile devices. If you need to specify the height, width, float, padding, margin, etc. of an element, assign it an id or a class and place all of the style declarations for that element in your site's local style sheet. Web Services will remove all inline styles from page code.

The SBMS Web Communications subject area prohibits overwriting BNL web template styles.

Correct

<h2>My Headline</h2>

 

 

<p>Some paragraph text...</p>

Incorrect

<h2 style="color:#blue;">My Headline</h2>

<h2 style="font-size:14px;">My Headline</h2>

<h2 class="myClass">My Headline</h2>

<p style="color:#blue;">Some paragraph text...</p>

<p style="font-size:14px;">Some paragraph text...</p>

<p class="myClass">Some paragraph text...</p>

Quick Links

Headlines

<h1></h1>

Example of an H1 Headline

<h2></h2>

Example of an H2 Headline

<h3></h3>

Example of an H3 Headline

<h4></h4>

Example of an H4 Headline

<h5></h5>
Example of an H5 Headline
<h6></h6>
Example of an H6 Headline

Paragraphs

<p></p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit eros vitae tempus. Donec sodales tortor eget mi venenatis consequat. Etiam elementum tincidunt aliquam. Pellentesque in odio id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed viverra mollis, odio augue gravida ante, non vestibulum orci sapien non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec porttitor et, cursus in turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

<div class="font-1"><p></p></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit eros vitae tempus. Donec sodales tortor eget mi venenatis consequat. Etiam elementum tincidunt aliquam. Pellentesque in odio id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed viverra mollis, odio augue gravida ante, non vestibulum orci sapien non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec porttitor et, cursus in turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

<div class="font-2"><p></p></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit eros vitae tempus. Donec sodales tortor eget mi venenatis consequat. Etiam elementum tincidunt aliquam. Pellentesque in odio id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed viverra mollis, odio augue gravida ante, non vestibulum orci sapien non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec porttitor et, cursus in turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

<p class="boxed"></p>

Vestibulum mi ipsum, ullamcorper et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed viverra mollis, odio augue gravida ante, non vestibulum orci sapien non metus. Quisque non nunc tortor.

Icons

Font Awesome Icons:

Website | Usage | Icon List

<span class="fa fa-wifi"></span>

Basic Icons:

<span class="fa fa-wifi fa-lg"></span>

Large Icons (lg):

<span class="fa fa-wifi fa-2x"></span>

Large Icons (2x):

<span class="fa fa-wifi fa-3x"></span>

Large Icons (3x):

<span class="fa fa-wifi fa-4x"></span>

Large Icons (4x):

<span class="fa fa-wifi fa-5x"></span>

Large Icons (5x):

<span class="fa fa-circle-o-notch fa-5x fa-spin"></span>

Spinner Icons:

Images

For CMS-based content (news releases, feature stories, etc.), images are sized in one of three sizes as indicated below. (Read the image captions for details about each image display type.)

<div class="image-100">
<img src="Image URL" />
<p>Caption text goes here...</p>
</div>
generic image

This is an example of a full-width image.  This image will always span the entire width of the container element it resides in.  Full-width images should always be uploaded at 720 pixels wide.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate aliquam dolor, lobortis convallis arcu semper at. Nam fermentum tempus urna, vel fermentum elit elementum at. Vivamus sodales pretium ultricies. Integer interdum pulvinar quam, non venenatis urna pellentesque a. In molestie nibh massa, sed luctus libero. Proin urna ligula, tincidunt in ullamcorper sit amet, dignissim vel ligula. Integer ut nunc gravida purus semper ultricies. Cras vitae rhoncus est. Donec porta dictum risus, eget rhoncus ante fringilla luctus. Mauris porttitor lacus id est fermentum dictum. Vivamus eleifend, felis in dapibus mollis, erat odio tristique massa, non imperdiet eros urna in mauris. Aliquam at ipsum tortor. Nulla tristique mi sit amet justo tempus ac pharetra velit porttitor. Cras et vulputate nulla.

Aenean commodo felis in velit volutpat fringilla. Vivamus ultrices mollis ornare. Sed fringilla consequat magna ac faucibus. Donec ligula sapien, auctor id adipiscing ut, sagittis vitae ligula. Ut elementum arcu id ante tempus elementum. Quisque ligula urna, commodo tempus condimentum blandit, tempus quis eros. Quisque et libero eget nibh hendrerit vulputate.

<div class="image-50">
<img src="Image URL" />
<p>Caption text goes here...</p>
</div>
generic image

This is an example of a half-width image.  This image will always span 50 percent of the width of the container element it resides in.  By default (unless specified otherwise) all images that are less than full-width wide will display on the right side of the element in which they reside. On mobile, half-width images will expand to span the full with of the container it resides in. Half-width images should always be uploaded at 355 pixels wide.

Suspendisse ornare, quam at elementum feugiat, tellus risus dictum sem, nec porta nulla tellus eget nisl. Maecenas diam sapien, vehicula eu pretium eget, euismod at lacus. Nam id nisi velit, id sagittis magna. Mauris dapibus, elit non cursus scelerisque, leo risus malesuada tellus, id facilisis elit odio in mi. Suspendisse non magna quis tortor lobortis molestie sit amet non ipsum. Nulla imperdiet, ante a commodo elementum, quam ipsum facilisis urna, sed fermentum enim augue ut turpis. Nam in quam eu purus eleifend dignissim mollis at nunc. Aenean non consectetur dui. In hac habitasse platea dictumst. Duis libero neque, convallis sed dictum eu, feugiat vel nisi. Ut tempor arcu a purus porttitor laoreet. Morbi eget viverra velit. Pellentesque orci nunc, aliquet non porttitor nec, volutpat eu metus. Aliquam rhoncus, odio id condimentum laoreet, lorem ligula pellentesque quam, quis commodo est magna a nunc. Etiam nec lacus eu arcu consectetur faucibus.

Duis pulvinar ultrices libero, vel sollicitudin risus vestibulum at. Nam lacinia commodo leo. Nullam vel magna ac purus porttitor tempor ac gravida lectus. Pellentesque at neque a lacus sollicitudin elementum sit amet sed urna. Donec vel erat sed erat auctor dignissim. Nulla eleifend condimentum nibh, id ultrices orci posuere a. Aliquam erat volutpat.

<div class="image-50 left">
<img src="Image URL" />
<p>Caption text goes here...</p>
</div>
generic image

This is an example of a half-width image that is aligned to the left of the container.  (Default alignment is to the right of the container.)

Vestibulum varius lacus nec mi aliquet at lobortis odio pellentesque. Aenean viverra ornare consectetur. Vivamus eu sapien magna, eget sagittis odio. Sed quam nisi, sagittis et varius eget, elementum ut augue. Praesent lobortis purus arcu, nec dapibus diam. In ac metus ligula. Donec molestie sem et dolor dapibus suscipit. Aliquam ut nibh nec nunc consectetur pharetra.

Quisque quis nulla vitae metus porta vulputate. Nullam hendrerit sem eu magna tincidunt ultricies. Duis facilisis cursus sem, eu porta ligula convallis id. Praesent eu aliquam elit. Aliquam venenatis ultricies odio, ac egestas odio semper ac. Cras sodales condimentum ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus scelerisque ornare est, sit amet fermentum tortor consequat interdum. Phasellus dignissim suscipit tristique. Donec massa lorem, faucibus nec faucibus et, molestie vitae sem.

<div class="image-30">
<img src="Image URL" />
<p>Caption text goes here...</p>
</div>
generic image

This is an example of an image that spans 30 percent of the width of the container element it resides in.  By default (unless specified otherwise) all images that are less than full-width wide will display on the right side of the element in which they reside. This image will not expand to full width on mobile browsers. (It will display at 40% wide on mobile browsers.)

Nullam blandit lectus eu arcu vestibulum interdum laoreet nisl pellentesque. Duis a nunc augue, in luctus mi. Integer bibendum malesuada nisl at posuere. Nunc venenatis bibendum ipsum, molestie interdum lacus molestie et. Curabitur varius faucibus bibendum. Integer vitae lacus diam. Morbi a libero enim. Proin at odio sit amet tortor luctus faucibus. Aenean ac tellus ut eros bibendum gravida eget nec metus. Etiam scelerisque rutrum hendrerit. Nullam fermentum lobortis vulputate. Aliquam eleifend, purus ut tincidunt consectetur, sem erat euismod velit, sed venenatis nunc purus at odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean fermentum purus vel risus feugiat et facilisis felis iaculis. Etiam rutrum arcu quis ante sagittis feugiat aliquet quam cursus.

Vestibulum elementum nulla ipsum, faucibus vulputate risus. Nam vitae tellus ipsum, id condimentum ipsum. In elit lorem, vestibulum eget faucibus in, egestas sed orci. Nulla eu lacus sit amet dui fermentum venenatis. Fusce consequat eleifend elementum. Duis sagittis tincidunt sapien a tincidunt. Ut ornare mauris ligula. Sed adipiscing tortor ut tellus fermentum ac bibendum magna vestibulum. Suspendisse et augue nunc, ac vulputate lectus.

 

<div class="image-30 left">
<img src="Image URL" />
<p>Caption text goes here...</p>
</div>
generic image

This is an example of a 30-percent-wide image that is aligned to the left of the container.  (Default alignment is to the right of the container.)

Donec urna velit, tristique in suscipit et, imperdiet non magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere justo odio, eu dictum risus. Suspendisse imperdiet neque in lectus tincidunt eleifend. Nullam non gravida turpis. Phasellus vel velit cursus sem auctor mollis. Nulla tellus sapien, fringilla non varius ac, dapibus eu odio. Curabitur vel ligula eget mi ornare adipiscing. Nulla venenatis tortor ut quam dictum at dictum felis tincidunt. Quisque nisi lectus, imperdiet sed tincidunt eu, suscipit vel felis. Pellentesque pretium molestie nunc eget interdum. Sed commodo, neque vitae tempor laoreet, nisl nisl cursus odio, at bibendum lacus magna vel dui. Suspendisse egestas sapien ipsum. Nullam egestas malesuada orci a elementum.

In hac habitasse platea dictumst. Donec mattis turpis at lorem mattis ac fermentum tortor malesuada. Quisque turpis metus, venenatis at vulputate ut, dignissim eu erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce dignissim placerat pulvinar. Phasellus placerat, dolor vel lobortis posuere, eros ante convallis dui, et eleifend dolor lectus ac massa. Pellentesque dui nulla, posuere eu gravida et, mollis posuere arcu. Curabitur consequat ligula sem, id congue justo. Ut quis faucibus mi. Duis fermentum lacinia augue vel lacinia. Pellentesque porta bibendum justo nec egestas. Maecenas scelerisque sodales odio, sed ultrices nibh ultrices et. In hac habitasse platea dictumst. Fusce eleifend elit vitae mi facilisis dapibus. Duis id pretium est. Aliquam non imperdiet arcu.

Thumbnail Images (Clickable)

<div class="thumb">
<div class="inner">
<a href="PAGE URL">
<img class="thumbImage" src="THUMBNAIL IMAGE URL" alt="INSERT TEXT"/>
<span class="more-icon target-page"></span>
</a>
</div><!--inner-->
<a class="thumbTitleLink" href="PAGE URL">Insert Title</a>
</div><!--thumb-->
Sample Clickable Thumbnail Image
Clickable Thumbnail (webpage)
 
<div class="thumb">
<div class="inner">
<a href="HIGH-RES IMAGE URL" rel="shadowbox" title="INSERT TITLE">
<img class="thumbImage" src="THUMBNAIL IMAGE URL" alt="INSERT TEXT"/>
<span class="more-icon target-image"></span>
</a>
</div><!--inner-->
<a class="thumbTitleLink" href="HIGH-RES IMAGE URL" rel="shadowbox" title="INSERT TEXT">Insert Title</a>
</div><!--thumb-->
Sample Clickable Thumbnail Image
Clickable Thumbnail (image)
 
<div class="thumb">
<div class="inner">
<a href="http://www.youtube.com/v/INSERT-YT-VIDEO-ID&hl=en&fs=1&rel=0&autoplay=1" rel="shadowbox;height=470;width=800;player=swf" title="INSERT TEXT">
<img class="thumbImage" src="THUMBNAIL IMAGE URL" alt="INSERT TEXT"/>
<span class="more-icon target-video"></span>
</a>
</div><!--inner-->
<a class="thumbTitleLink" href="http://www.youtube.com/v/INSERT-YT-VIDEO-ID&hl=en&fs=1&rel=0&autoplay=1" rel="shadowbox;height=470;width=800;player=swf" title="INSERT TEXT">Insert Title</a>
</div><!--thumb-->
Sample Clickable Thumbnail Image
Clickable Thumbnail (video)

Text Formatting

<hr />
<pre></pre>
This is an example of preformatted text.
<em></em>

This text is emphasized.

<strong></strong>

This text is strong.

<code></code>

This is some computer code.

<b></b>

This text is bold.

<i></i>

This text is italic.

<a></a>

This text is an example of a hyperlink.

Lists

<ul></ul>
  • Donec euismod vulputate massa, vel suscipit nunc aliquet nec
  • Vivamus tincidunt placerat malesuada
  • Vestibulum porta libero et odio dignissim vitae feugiat odio accumsan. Vivamus ut mi ac eros adipiscing dignissim. Donec euismod vulputate massa, vel suscipit nunc aliquet nec.
  • Vivamus ut velit elit, sed sollicitudin odio. Aliquam at ipsum non mauris mattis dictum. Donec dolor magna, tempus gravida sollicitudin ac, varius eu elit. Ut ac ipsum ipsum.
  • Ut aliquet metus ac justo pulvinar condimentum
<ol></ol>
  1. Donec euismod vulputate massa, vel suscipit nunc aliquet nec
  2. Vivamus tincidunt placerat malesuada
  3. Vestibulum porta libero et odio dignissim vitae feugiat odio accumsan. Vivamus ut mi ac eros adipiscing dignissim. Donec euismod vulputate massa, vel suscipit nunc aliquet nec.
  4. Vivamus ut velit elit, sed sollicitudin odio. Aliquam at ipsum non mauris mattis dictum. Donec dolor magna, tempus gravida sollicitudin ac, varius eu elit. Ut ac ipsum ipsum.
  5. Ut aliquet metus ac justo pulvinar condimentum

Tables

<table>
<tr><th></th><th></th></tr>
<tr><td></td><td></td></tr>
</table>
Table Header Table Header
Some text Some text
Some text Some text
Some text Some text

Tabs

<div id="tabs">
  <ul>
   <li><a href="#tabs-1">Notes</a></li>
   <li><a href="#tabs-2">HTML</a></li>
   <li><a href="#tabs-3">CSS</a></li>
  </ul>
  <div id="tabs-1">
    <div class="tabInnerShell">			
      <h2>Tab Content</h2>
      <p>Content coming soon.</p>
    </div><!--tabInnerShell-->
  </div><!--tabs-1-->
  <div id="tabs-2">
    <div class="tabInnerShell">			
      <h2>Tab Content</h2>
      <p>Content coming soon.</p>
    </div><!--tabInnerShell-->
  </div><!--tabs-2-->
  <div id="tabs-3">
    <div class="tabInnerShell">			
      <h2>Tab Content</h2>
      <p>Content coming soon.</p>
    </div><!--tabInnerShell-->
  </div><!--tabs-3-->
</div><!--tabs-->
12 a/o
1 a
11 o
2 a
10 o
3 a
9 o
4 a
8 o
5 a
7 o
6 a
6 o
12 a/o
16 a/o
1 a
15 o
2 a
14 o
3 a
13 o
4 a
12 o
5 a
11 o
6 a
10 o
7 a
9 o
8 a
8 o
16 a/o
24 a/o
1 a
23 o
2 a
22 o
3 a
21 o
4 a
20 o
5 a
19 o
6 a
18 o
7 a
17 o
8 a
16 o
9 a
15 o
10 a
14 o
11 a
13 o
12 a
12 o
24 a/o

Vertical Tabs

See below for HTML

Planes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit eros vitae tempus. Donec sodales tortor eget mi venenatis consequat. Etiam elementum tincidunt aliquam. Pellentesque in odio id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed viverra mollis, odio augue gravida ante, non vestibulum orci sapien non metus. Quisque non nunc tortor.

Trains

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit eros vitae tempus. Donec sodales tortor eget mi venenatis consequat. Etiam elementum tincidunt aliquam. Pellentesque in odio id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Sed interdum sodales dolor, ac vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec porttitor et, cursus in turpis.

Boats

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit eros vitae tempus. Donec sodales tortor eget mi venenatis consequat. Etiam elementum tincidunt aliquam. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed viverra mollis, odio augue gravida ante, non vestibulum orci sapien non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec porttitor et, cursus in turpis.

Hotels

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit eros vitae tempus. Vestibulum mi ipsum, ullamcorper et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed viverra mollis, odio augue gravida ante, non vestibulum orci sapien non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec porttitor et, cursus in turpis.

Automobiles

Etiam elementum tincidunt aliquam. Pellentesque in odio id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed viverra mollis, odio augue gravida ante, non vestibulum orci sapien non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec porttitor et, cursus in turpis. 
<div id="vertical-tabs" class="ui-tabs-vertical ui-helper-clearfix">
	<ul>
		<li><a href="#a"><span class="fa fa-plane fa-3x"></span>Planes</a></li><!--
		--><li><a href="#b"><span class="fa fa-subway fa-3x"></span>Trains</a></li><!--
		--><li><a href="#c"><span class="fa fa-ship fa-3x"></span>Boats</a></li><!--
		--><li><a href="#d"><span class="fa fa-home fa-3x"></span>Hotels</a></li><!--
		--><li><a href="#e"><span class="fa fa-car fa-3x"></span>Automobiles</a></li>
	</ul>
	<div id="a">
		<span class="fa fa-plane fa-5x"></span>
		<h2>Planes</h2>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum
		blandit eros vitae tempus. Donec sodales tortor eget mi venenatis
		consequat. Etiam elementum tincidunt aliquam. Pellentesque in odio
		id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper
		et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo
		congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed
		viverra mollis, odio augue gravida ante, non vestibulum orci sapien
		non metus. Quisque non nunc tortor. 
	</div>
	<div id="b">
		<span class="fa fa-subway fa-5x"></span>
		<h2>Trains</h2>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum
		blandit eros vitae tempus. Donec sodales tortor eget mi venenatis
		consequat. Etiam elementum tincidunt aliquam. Pellentesque in odio
		id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper
		et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo
		congue ultrices nec in risus. Donec eget mi sem. Sed interdum sodales dolor, ac
		vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec
		porttitor et, cursus in turpis. 
	</div>
	<div id="c">
		<span class="fa fa-ship fa-5x"></span>
		<h2>Boats</h2>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum
		blandit eros vitae tempus. Donec sodales tortor eget mi venenatis
		consequat. Etiam elementum tincidunt aliquam. Pellentesque ac odio ut justo
		congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed
		viverra mollis, odio augue gravida ante, non vestibulum orci sapien
		non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac
		vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec
		porttitor et, cursus in turpis. 
	</div>
	<div id="d">
		<span class="fa fa-home fa-5x"></span>
		<h2>Hotels</h2>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum
		blandit eros vitae tempus. Vestibulum mi ipsum, ullamcorper
		et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo
		congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed
		viverra mollis, odio augue gravida ante, non vestibulum orci sapien
		non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac
		vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec
		porttitor et, cursus in turpis. 
	</div>
	<div id="e">
		<span class="fa fa-car fa-5x"></span>
		<h2>Automobiles</h2>
		Etiam elementum tincidunt aliquam. Pellentesque in odio
		id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper
		et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo
		congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed
		viverra mollis, odio augue gravida ante, non vestibulum orci sapien
		non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac
		vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec
		porttitor et, cursus in turpis. 
	</div>
</div><!-- #vertical-tabs -->

Blockquotes & Pullquotes

<blockquote></blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit eros vitae tempus. Donec sodales tortor eget mi venenatis consequat. Etiam elementum tincidunt aliquam. Pellentesque in odio id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed viverra mollis, odio augue gravida ante, non vestibulum orci sapien non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec porttitor et, cursus in turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

In hac habitasse platea dictumst. Sed condi mentum diam in est vestibulum pretium id eget nulla. Pellentesque sollicitudin pellentesque sem, a faucibus mauris eleifend et. Sed erat velit, feugiat ac ultrices at, posuere at velit.

Fusce sit amet lectus ligula, a facilisis sapien. Curabitur tristique sem augue. Fusce facilisis interdum aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel augue vitae neque molestie ultrices quis vitae diam. Fusce elit justo, vestibulum pretium volutpat nec, tristique in leo. Quisque vehicula bibendum magna nec elementum. Nullam eget nisi id neque rutrum egestas. Nulla ut turpis non felis sodales iaculis. Donec feugiat iaculis lacus, a sodales velit vulputate nec. Nulla tristique, risus in sodales porta, leo arcu molestie massa, sit amet porta urna neque vitae nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ac mollis nisl.

<div class="pullquote">
<p></p>
<p class="small"></p>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit eros vitae tempus. Donec sodales tortor eget mi venenatis consequat. Etiam elementum tincidunt aliquam. Pellentesque in odio id metus euismod sodales ut ut neque. Vestibulum mi ipsum, ullamcorper et placerat quis, rhoncus lobortis nisl. Pellentesque ac odio ut justo congue ultrices nec in risus. Donec eget mi sem. Ut porttitor, dui sed viverra mollis, odio augue gravida ante, non vestibulum orci sapien non metus. Quisque non nunc tortor. Sed interdum sodales dolor, ac vulputate turpis tristique ut. Suspendisse massa mi, facilisis nec porttitor et, cursus in turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

...in hac habitasse platea dictumst. Sed condi mentum diam in est vestibulum pretium id eget nulla. Pellentesque sollicitudin pellentesque sem, a faucibus mauris eleifend et. Sed erat velit, feugiat ac ultrices at, posuere at velit.

— Abraham Lincoln, President

Aenean mi quam, lacinia eget tempus id, aliquet at lacus. Nullam commodo commodo rutrum. Etiam at libero odio. Fusce eu diam quis magna vehicula pellentesque. Duis tristique, ante eu accumsan porta, elit sem cursus mi, et imperdiet nisi enim at lectus. Donec vel faucibus metus. In hac habitasse platea dictumst. Sed condimentum diam in est vestibulum pretium id eget nulla. Pellentesque sollicitudin pellentesque sem, a faucibus mauris eleifend et. Sed erat velit, feugiat ac ultrices at, posuere at velit.

Fusce sit amet lectus ligula, a facilisis sapien. Curabitur tristique sem augue. Fusce facilisis interdum aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel augue vitae neque molestie ultrices quis vitae diam. Fusce elit justo, vestibulum pretium volutpat nec, tristique in leo. Quisque vehicula bibendum magna nec elementum. Nullam eget nisi id neque rutrum egestas. Nulla ut turpis non felis sodales iaculis. Donec feugiat iaculis lacus, a sodales velit vulputate nec. Nulla tristique, risus in sodales porta, leo arcu molestie massa, sit amet porta urna neque vitae nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ac mollis nisl.

Buttons

If you want a button to appear full width on mobile devices (and most should for ease of use), then add the class .fwmButton to the button.

Simple Button

<a href="#" class="button"></a>
.button

Sizes

<a href="#" class="small button"></a>
small button
<a href="#" class="button"></a>
medium button (no size class specified)
<a href="#" class="large button"></a>
large button

First and Last

<a href="#" class="large button first"></a>
.large .button .first (no left margin)
<a href="#" class="large button last"></a>
.large .button .last (no right margin)

Colors

<a href="#" class="green button"></a>
green
<a href="#" class="blue button"></a>
blue
<a href="#" class="orange button"></a>
orange
<a href="#" class="orangellow button"></a>
orangellow
<a href="#" class="white button"></a>
white
<a href="#" class="red button"></a>
red
<a href="#" class="paleRed button"></a>
paleRed
<a href="#" class="magenta button"></a>
magenta

Super Buttons (Rounded)

<a href="#" class="super button"></a>
super button
<a href="#" class="small super button"></a>
small super button
<a href="#" class="small white super button"></a>
small white super button
<a href="#" class="large super button"></a>
large super button

Other Buttons

<a href="#" class="strike button"></a>
strike button
<a href="#" class="secondary button"></a>
secondary button

Form Fields

Default Implementation

<p>
<span class="label">Field Label <span class="small">(additional field description here)</span></span>
<input class="BNLinput" name="TEXT1" type="text" value="Some Value" />
</p>
 

Field Label (additional field description here)

Additional Classes

.BNLinput .smallField

Field Label (additional field description here)

.BNLinput .mediumField

Field Label (additional field description here)

.BNLinput .mediumField .readonlyField

Field Label (additional field description here)

.BNLinput .mediumField .errField

Field Label (additional field description here)

.BNLdropdown

Field Label (additional field description here)

.BNLdropdown .errField

Field Label (additional field description here)

.BNLtextarea

Field Label (additional field description here)

.BNLtextarea .errField

Field Label (additional field description here)

<input type="radio" name="RADIO01" class="BNLradioButton firstButton" />First Radio Button
<input type="radio" name="RADIO01" class="BNLradioButton" />Second Radio Button
<input type="radio" name="RADIO01" class="BNLradioButton" />Third Radio Button
 
 

Field Label (additional field description here) First Radio Button Second Radio Button Third Radio Button

<input type="checkbox" name="CHECKBOX01" class="BNLcheckbox firstCheckbox" />First Checkbox
<input type="checkbox" name="CHECKBOX01" class="BNLcheckbox" />Second Checkbox
<input type="checkbox" name="CHECKBOX01" class="BNLcheckbox" />Third Checkbox
 
 

Field Label (additional field description here) First Checkbox Second Checkbox Third Checkbox

Slideshows

Source Code

http://www.woothemes.com/flexslider/

Working Example

  • Captions and cupcakes. Winning combination.

  • Simple cupcake sitting in leaves.

  • Yum. Chocolate!

  • Who doesn't like rainbow sprinkles?

Requirements

  1. Place the following code in the head section of the page:
    <link rel="stylesheet" href="/common/templates/global/css/bnl-slideshow.css" type="text/css" />
<script>
$(function() {
	$('.flexslider').flexslider({
		slideshowSpeed: 7000,
		animationSpeed: 3000,
		start: function(slider) { slider.removeClass('loading');  }
	});
});
</script>
  2. Place the following code in the body section of the page where you want your slideshow to appear: 
    <div class="flexslider loading">
	<ul class="slides">
		<li>
			<img src="/common/templates/documentation/images/slideshow/slide1.jpg" />
			<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
		</li>
		<li>
			<img src="/common/templates/documentation/images/slideshow/slide2.jpg" />
			<p class="flex-caption">Simple cupcake sitting in leaves.</p>
		</li>
		<li>
			<img src="/common/templates/documentation/images/slideshow/slide3.jpg" />
			<p class="flex-caption">Yum. Chocolate!</p></li>
		<li>
			<img src="/common/templates/documentation/images/slideshow/slide4.jpg" />
			<p class="flex-caption">Who doesn't like rainbow sprinkles?</p>
		</li>
	</ul><!--slides-->
</div><!--flexslider-->