Classes and Selectors

Skill Level: 
Intermediate

    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
    Contributed By: 
    IIM