Invesco US Style Guide

Helpers

These elements are custom helper classes designed to assist in the styling of the Invesco US website.

Widget Helpers

The website utilizes content blocks divided into "widgets". These widgets are equivalent to "portlets" in the Open Text CMS.

.widget

What it does: Applies the proper padding to the bottom and top of the section, as well as a gray border to the top as a visual divider.

Used in the #main div to designate a section.

.first-widget

What it does: Removes the top border of the .widget class.

Used in the first widget, in conjunction with the .widget class, that appears at the top of the .main-content div. This is dynamically applied via jquery.

Example:

<div class="widget first-widget">
	<h3>Widget Title | <a href="" class="view-all">View All</a></h3>
    	<p>Content</p>
</div>

jQuery

$('#main').find('.widget:first-of-type').addClass('first-widget');

.first-section

What it does: Applies a negative top margin of 10 to offset layout issues.

It is applied to the #bc-wrapper that appears at the top of the .main-content div.

Example:

<div id="bc-wrapper" class="first-section"></div>

.first-span

What it does: Applies a 0 left margin to offset layout issues.

Used in the .span3 or .span4 (whichever appear first) within the .main-content div.

<div class="span4 first-span"></div>

.second-span

What it does: Applies a 0 left margin to offset layout issues.

Used in the .span3 or .span4 (whichever appear second) within the .main-content div.

<div class="span3 second-span"></div>

Text Helpers

These helpers define common color, size and other text attributes.

.annotation

What it does: Applies text size of 11px and 8px top margin (centering the text when next to an H tag).

Used on text.

.muted

What it does: Applies a gray color to text.

Used in view-all, article by-lines, footnotes, etc.

.text-right

What it does: Applies text-align: right to a <td> tag.

Used in Data Table layouts that require a text-align: right.

.small

What it does: Applies a 10 pixel height to text.

Used when smaller text is needed.

Padding and Margin Helpers

These helpers make common adjustments for margin and/or padding of elements.

.tight

What it does: Applies a bottom margin of -5px.

Used in Article by-lines or any element that needs to rest close to the element above.

.tight-top

What it does: Applies a top margin of -5px.

Used on any element that needs to rest close to the element below.

.loose

What it does: Applies a bottom margin of 10px.

Used on any element that needs spacing from the element below.