Classes and Selectors

Band Background Colors

For more in depth information and example see our content bands.

.wdn-light-triad-band

Provides a background-color in the triad color family

.wdn-light-complement-band

Provides a background-color in the complement color family

.wdn-light-neutral-band

Provides a background-color in the neutral color family

.wdn-band-triad-seperator

Provides a top/bottom border in the triad color family

.wdn-band-complement-seperator

Provides a top/bottom border in the complement color family

.wdn-band-neutral-seperator

Provides a top/bottom border in the neutral color family

Buttons

For more in depth information and examples see our button documentation.

.wdn-button

Displays the element like it is a button (flat, rounded, colored in neutral family)

.wdn-button-triad

To be used with `.wdn-button` to provide colors in the triad family

.wdn-button-complement

To be used with `.wdn-button` to provide colors in the complement family

.wdn-button-brand

To be used with `.wdn-button` to provide colors in the brand family

.wdn-button-energetic

To be used with `.wdn-button` to provide colors in the energetic family

Clear fix

.clear

Clears both float directions

.clear-top

Removes top margin

Element Position

.centered

Centers a block-level element (not text)

.wdn-pull-right

Forces a float right

.wdn-pull-left

Forces a float left

Frame

See our image documentation for an example and more details.

.wdn-frame

Provides a bordered area with margin on the bottom

.wdn-frame img

Shows the image as a block at the same width as the frame

.wdn-frame figcaption

Add background-color and padding to the element

Forms

See our forms documentation for an example more details.

form ul, form ol

Remove margin, padding, bullets

form ul.wdn-std, form ol.wdn-std

Restore default margin, padding, and bullets

form li

Add margin between form list items, and remove margin when nested

form fieldset

Provide standard margin

form legend

Provide standard margin, padding, border. Uses `.wdn-heading` styles

form label

Uses Gotham typeface

form input, form textarea, form select

Rounded boxes with Gotham typeface and standard padding

form .wdn-input-group

A wrapper for displaying an input and decoration/button as a single line

form .wdn-input-group .wdn-input-group-btn

A wrapper for button elements used in an input group

form span.required

Text that will be shown in red

form span.helper

Text that will displayed at size 10

form input[type="submit"], form input[type="button"], form button

Stand button styles, flat and colored

form input[type="reset"]

A button that only appears as text

Hide/show text

.wdn-text-hidden

Hides the element while making the text accessible to screen-readers

.hidden

Hides the element using display:none

.wdn-fouc-fix

Hides the element using visibility: hidden

Image Styles

See our image documentation for an example and more details.

a.imagelink

Removes link border

a.imagelink

Removes link border

Layout

For more in depth information and examples see our grid documentation and band documentation.

.wdn-band

A full-width portion of content

.wdn-band .wdn-inner-wrapper

A wrapper for full-width content providing proper padding

wdn-band .wdn-inner-wrapper.wdn-inner-padding-sm

A wrapper with smaller than normal top/bottom padding

.wdn-band .wdn-inner-wrapper.wdn-inner-padding-lg

A wrapper with larger than normal top/bottom padding

.wdn-band .wdn-inner-wrapper.wdn-inner-padding-no-top

A wrapper with no top padding

.wdn-band .wdn-inner-wrapper.wdn-inner-padding-no-bottom

A wrapper with no bottom padding

.wdn-band .wdn-inner-wrapper.wdn-inner-padding-none

A wrapper with not top/bottom padding

.wdn-band .wdn-stretch

Stretches a inline element to full width

.wdn-band .wdn-center

Uses center alignment for text in a band

.wdn-band .wdn-text-band

A band specifically design to only contain text (less wide at desktop sizes)

.wdn-two-flow-columns

Uses the CSS3 Multi-column module to provide 2 columns of content with a light rule between

.wdn-three-flow-columns

Uses the CSS3 Multi-column module to provide 3 columns of content with a light rule between

.wdn-grid-set

A wrapper for starting a grid layout, provides proper side margins for gutters

.wdn-grid-set-full, .wdn-grid-set-halves, .wdn-grid-set-thirds, .wdn-grid-set-fourths, .wdn-grid-set-fifths, .wdn-grid-set-sixths, .wdn-grid-set-sevenths

A wrapper for starting a grid layout of equally sized columns (each .wdn-col child will be the same width). These classes can be prefixed with `bp1-`, `bp2-`, `bp3-, or `bp4-` to provide the browser width at which the grid set _starts_ to provide column widths

.wdn-col, .wdn-col-full, .wdn-col-one-half, .wdn-col-one-third, .wdn-col-two-thirds, .wdn-col-one-fourth, .wdn-col-two-fourths, .wdn-col-three-fourths, .wdn-col-one-fifth, .wdn-col-two-fifths, .wdn-col-three-fifths, .wdn-col-four-fifths, .wdn-col-one-sixth, .wdn-col-two-sixths, .wdn-col-three-sixths, .wdn-col-four-sixths, .wdn-col-five-sixths, .wdn-col-one-seventh, .wdn-col-two-sevenths, .wdn-col-three-sevenths, .wdn-col-four-sevenths, .wdn-col-five-sevenths, .wdn-col-six-sevenths

A wrapper for a grid layout column, provides padding for gutters. These classes can be prefixed with `bp1-`, `bp2-`, `bp3-, or `bp4-` to provide the browser width at which column width _starts_

.wdn-col .visual-island

Provides padding inside a grid layout column to allow for borders and backgrounds that don't interfere with the grid gutters

.wdn-grid-set-halves.wdn-grid-clear, .wdn-grid-set-thirds.wdn-grid-clear, .wdn-grid-set-fourths.wdn-grid-clear, .wdn-grid-set-fifths.wdn-grid-clear, .wdn-grid-set-sixths.wdn-grid-clear, .wdn-grid-set-sevenths.wdn-grid-clear

Clears the left float plane for the start of a consistent grid layout row automatically (this does not work when multiple breakpoint grid sets are used)

Lists

For more in depth information and examples see our lists documentation.

.wdn-list-reset

Removes margin, padding, and bullets from list elements (ul, ol)

.wdn-list-header

Same as `.wdn-alt-header` but with a border and padding

Promo Band

.wdn-promo-band

A wrapper for displaying a poster-like image or video

.wdn-promo-container

A wrapper that provides a dark background gradient over a promo band content

.wdn-promo-container .wdn-promo-content

A wrapper for the content of the poster, offset from the bottom at various widths, shown in all-caps

.wdn-promo-container .wdn-promo-content .wdn-promo-text

The headline of the poster, shown in Tungsten semi-bold and size optimized for browser width

.wdn-promo-container.wdn-inverse

Changes the wrapper to use a light background gradient

.wdn-promo-container.wdn-inverse .wdn-text-over-image

Adds a light colored text-shadow under the standard text

Tables

For more in depth information and examples, see our tables documentation.

table

Adds a border around the entire table and makes it full-width

table.primary, table.cool, table.soothing, table.neutral, table.energetic

Provides the color family for the table's headings and background stripes

table caption

Uses the Tungsten typeface in normal weight at size 41 (38)

table th

Uses a darker background and border-top with standard padding and Gotham in all-caps

table td

Add standard padding

table tbody tr:nth-of-type(even), table tbody tr:nth-of-type(odd)

Add background color differentiation

table tbody td

Add top border

table.wdn_responsive_table thead tr

Hides the thead rows at mobile widths

table.wdn_responsive_table td, table.wdn_responsive_table th

Displays these elements as blocks at mobile widths and center aligns the text

table.wdn_responsive_table tbody td:before

Visually displays the "data-header" attribute as a block before the cell

Tabs

For more in depth information and examples, see our tabs examples.

.wdn_tabs

A list element that will be shown with tab-like background/borders

.wdn_tabs_content

A wrapper for content activated by tabs, provides the same background and padding

Text Style

For more in depth information and examples, see our headings documentation and typography documentation.

.wdn-brand

Uses the Tungsten typeface in normal weight

.wdn-sans-serif

Use the Gotham typeface

.wdn-heading, .wdn-impact

Uses the Tungsten typeface in semi-bold weight

.wdn-brand-caps

Same as `.wdn-heading` in all-caps

.wdn-sans-caps

Uses the Gotham typeface in all-caps

.wdn-alt-header

Uses the Gotham typeface in all-caps at size 16 (13)

.wdn-subhead

Same as `.wdn-sans-caps` displayed as a block, with tight margin and faded out

.wdn-intro-p

Text at size 21 (17)

p.small

Text at size 12 (13)

.number

Text that is bold face and sized at 32

Twitter

.twitter-band

A wrapper for displaying twitter related content, provides twitter brand colors in Gotham typeface

.twitter-band .author

Displays the content as a block in the twitter brand color without text-decoration

Quotes

For more in depth information and examples, see our quotes documentation.

.wdn-quote

Adds quotation decorations around the content, standard padding, center aligned at size 30 (23)

.wdn-quoter

A wrapper for the speaker/author of the quote; shown as a block in Tungsten typeface, adds standard padding

.wdn-quoter .quoter-context

A wrapper to provide context to the speaker's name (affiliation, etc); shown as a block in Gotham typeface, faded out at size 12 (10)

Zenbox

.zenbox

A wrapper for content that is slightly padded with a darker background color

Page Areas

.hide-wdn_institution_title, .hide-wdn_identity_management, .hide-wdn_search, .hide-wdn_navigation_wrapper, .hide-breadcrumbs, .hide-pagetitle, .hide-footer, .hide-wdn_footer_related, .hide-wdn_copyright, .hide-wdn_footer_contact, .hide-wdn_attribution, .hide-wdn_logos, .hide-wdn_tool_links

Hides the designated area by changing the display.

.terminal

To be used on the <body> element, to hide the breadcrumbs, navigation, related links, and contact us sections