HOME
 
 
 

Typography Examples

 
 
This shows the div class of fRight and the div class of caption

This is the H1 Header Element

This is the H2 Header Element

This is the H3 Header Element

This is the H4 Header Element

This is the H5 Header Element
This is the H6 Header Element

Above is the HR tag. This is standard paragraph text

All classes can be adjusted and modified using the margins classes available in grid.css


Top and Bottom margin classes [This is class subhead]

class name -> top20 = margin-top 20px
class name -> top12 = margin-top 12px
class name -> top10 = margin-top 10px
class name -> bot20 = margin-bottom 20px
class name -> bot12 = margin-bottom 12px
class name -> bot10 = margin-bottom 10px
class name -> lt30 = margin-left 30px
class name -> lt24 = margin-left 24px
class name -> lt20 = margin-left 20px
class name -> lt12 = margin-left 12px
class name -> lt10 = margin-left 10px
class name -> lt6 = margin-left 6px


Columnar Width classes
These classes can be assigned to columns that have float/inline in them... including the Grid tags explained below


Width Classes are set in increments:
w10, w20, w30, w40, w50, w60, w70, w80, w90, w100
w100,w120,w140,w160,w180,w200,w220, w240, w260, w280, w300, w320, w340, w360, w380, w400, w420, w440, w460, w480, w500,
w520, w540, w560, w580, w600, w620, w640, w660, w684, w720,w740

 

This class can be used as a block, or floating div. You can assign a float class to this div and inherit the standard floating pattern of the template. class="floatLT" is set as floating left, and a rightmargin of 6px. You may also use the class "floatRT" to get a right floating div with a leftmargin of 6px.


Floating inline column classes
These classes can be assigned to columns and include floating inline css markup

.g161{width:141px;}
.g161B{width:154px;}
.g163{width:157px;}
.g326{width:320px;}
.g326B{width:316px;}
.g400{width:400px;}
.g489{width:483px;}
.g652{width:646px;}
.g754{width:767px;}
.g815{width:809px;}
.g978{width:972px;}
.g984{width:978px;}


This is the regDiv class that can be assigned to a div tag

Register December 1, 2011

 


This is the registerBtn class that can be assigned to a link tag
Register Now


This is an unnumbered list within the main content area ul class is called "copy" ul class="copy"

  • Program Highlights
  • Schedule
  • Registration & Venue
  • Sponsorship Opportunities
  • Exhibitor Opportunities

This is an h1 tag within the div class "item"

This is an h2 tag within the div class "item"

This is an h3 tag within the div class "item"


This is the italic class. Any element can have .italic assigned to inherit only the italic css


This is the div.headerTop class
This is the div.newsTitle class
This is the div.pressTitle class

Below is the moduleMenu class used in the right columns:


This is the span.arrowImg class

This is the p.location class


This is the quarterly Column grid below

Coffee Trax 4th Quarter 2009
Coffee Trax 4th Quarter 2008
Coffee Trax 1st Quarter 2007
 

This is the Archive Column grid below. Column widths can be assigned with additional width classes listed above. All Grids should be ended with a div.clear tag

Item1
Item 2
Item 3
 

This is a link to a pdf file
This is a link to a pdf file
This is a link with the redBx class attached »

This is a link with the redBxLg class attached »


Here are Section Rulers Below:

               
This is class sectionRuler
               

This is class sectionDivider
               
This is class sectionDividerB

Here is an image with class "imgLeft" floating left image.
Padding is set to 5px. For more padding- use class "imgLeft12"

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

 

Here is an image with class "imgRight" floating left image.
Padding is set to 5px. For more padding- use class "imgRight12"

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

 
Click here to subscribe for one year at $65

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

Click here for the article archives (members only)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

Click here to subscribe for one year at $65

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

What is Coffee

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

What is Coffee

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

What is Coffee

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

Newsletters & Periodicals

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

Newsletters & Periodicals

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

Newsletters & Periodicals

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

 

Newsletters & Periodicals

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

 

Newsletters & Periodicals

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis