5.0 Classes

5.0 Utility Classes

Height & Width

.dcf-u-h100
height: 100%
.dcf-u-w100
width: 100%

Margin

.dcf-u-m0
margin (all sides), value 0
.dcf-u-m1
margin (all sides), value 1
.dcf-u-m2
margin (all sides), value 2
.dcf-u-m3
margin (all sides), value 3
.dcf-u-m4
margin (all sides), value 4
.dcf-u-m5
margin (all sides), value 5
.dcf-u-m6
margin (all sides), value 6
.dcf-u-m7
margin (all sides), value 7
.dcf-u-m8
margin (all sides), value 8
.dcf-u-m9
margin (all sides), value 9
.dcf-u-mt0
margin-top (all sides), value 0
.dcf-u-mt1
margin-top (all sides), value 1
.dcf-u-mt2
margin-top (all sides), value 2
.dcf-u-mt3
margin-top (all sides), value 3
.dcf-u-mt4
margin-top (all sides), value 4
.dcf-u-mt5
margin-top (all sides), value 5
.dcf-u-mt6
margin-top (all sides), value 6
.dcf-u-mt7
margin-top (all sides), value 7
.dcf-u-mt8
margin-top (all sides), value 8
.dcf-u-mt9
margin-top (all sides), value 9
.dcf-u-mr0
margin-right (all sides), value 0
.dcf-u-mr1
margin-right (all sides), value 1
.dcf-u-mr2
margin-right (all sides), value 2
.dcf-u-mr3
margin-right (all sides), value 3
.dcf-u-mr4
margin-right (all sides), value 4
.dcf-u-mr5
margin-right (all sides), value 5
.dcf-u-mr6
margin-right (all sides), value 6
.dcf-u-mr7
margin-right (all sides), value 7
.dcf-u-mr8
margin-right (all sides), value 8
.dcf-u-mr9
margin-right (all sides), value 9
.dcf-u-mb0
margin-bottom (all sides), value 0
.dcf-u-mb1
margin-bottom (all sides), value 1
.dcf-u-mb2
margin-bottom (all sides), value 2
.dcf-u-mb3
margin-bottom (all sides), value 3
.dcf-u-mb4
margin-bottom (all sides), value 4
.dcf-u-mb5
margin-bottom (all sides), value 5
.dcf-u-mb6
margin-bottom (all sides), value 6
.dcf-u-mb7
margin-bottom (all sides), value 7
.dcf-u-mb8
margin-bottom (all sides), value 8
.dcf-u-mb9
margin-bottom (all sides), value 9
.dcf-u-ml0
margin-left (all sides), value 0
.dcf-u-ml1
margin-left (all sides), value 1
.dcf-u-ml2
margin-left (all sides), value 2
.dcf-u-ml3
margin-left (all sides), value 3
.dcf-u-ml4
margin-left (all sides), value 4
.dcf-u-ml5
margin-left (all sides), value 5
.dcf-u-ml6
margin-left (all sides), value 6
.dcf-u-ml7
margin-left (all sides), value 7
.dcf-u-ml8
margin-left (all sides), value 8
.dcf-u-ml9
margin-left (all sides), value 9

Padding

.dcf-u-p0
padding (all sides), value 0
.dcf-u-p1
padding (all sides), value 1
.dcf-u-p2
padding (all sides), value 2
.dcf-u-p3
padding (all sides), value 3
.dcf-u-p4
padding (all sides), value 4
.dcf-u-p5
padding (all sides), value 5
.dcf-u-p6
padding (all sides), value 6
.dcf-u-p7
padding (all sides), value 7
.dcf-u-p8
padding (all sides), value 8
.dcf-u-p9
padding (all sides), value 9
.dcf-u-pt0
padding-top (all sides), value 0
.dcf-u-pt1
padding-top (all sides), value 1
.dcf-u-pt2
padding-top (all sides), value 2
.dcf-u-pt3
padding-top (all sides), value 3
.dcf-u-pt4
padding-top (all sides), value 4
.dcf-u-pt5
padding-top (all sides), value 5
.dcf-u-pt6
padding-top (all sides), value 6
.dcf-u-pt7
padding-top (all sides), value 7
.dcf-u-pt8
padding-top (all sides), value 8
.dcf-u-pt9
padding-top (all sides), value 9
.dcf-u-pr0
padding-right (all sides), value 0
.dcf-u-pr1
padding-right (all sides), value 1
.dcf-u-pr2
padding-right (all sides), value 2
.dcf-u-pr3
padding-right (all sides), value 3
.dcf-u-pr4
padding-right (all sides), value 4
.dcf-u-pr5
padding-right (all sides), value 5
.dcf-u-pr6
padding-right (all sides), value 6
.dcf-u-pr7
padding-right (all sides), value 7
.dcf-u-pr8
padding-right (all sides), value 8
.dcf-u-pr9
padding-right (all sides), value 9
.dcf-u-pb0
padding-bottom (all sides), value 0
.dcf-u-pb1
padding-bottom (all sides), value 1
.dcf-u-pb2
padding-bottom (all sides), value 2
.dcf-u-pb3
padding-bottom (all sides), value 3
.dcf-u-pb4
padding-bottom (all sides), value 4
.dcf-u-pb5
padding-bottom (all sides), value 5
.dcf-u-pb6
padding-bottom (all sides), value 6
.dcf-u-pb7
padding-bottom (all sides), value 7
.dcf-u-pb8
padding-bottom (all sides), value 8
.dcf-u-pb9
padding-bottom (all sides), value 9
.dcf-u-pl0
padding-left (all sides), value 0
.dcf-u-pl1
padding-left (all sides), value 1
.dcf-u-pl2
padding-left (all sides), value 2
.dcf-u-pl3
padding-left (all sides), value 3
.dcf-u-pl4
padding-left (all sides), value 4
.dcf-u-pl5
padding-left (all sides), value 5
.dcf-u-pl6
padding-left (all sides), value 6
.dcf-u-pl7
padding-left (all sides), value 7
.dcf-u-pl8
padding-left (all sides), value 8
.dcf-u-pl9
padding-left (all sides), value 9

Font Size

.dcf-u-lg1
incrementally larger than base font-size
.dcf-u-lg2
incrementally larger than base font-size
.dcf-u-lg3
incrementally larger than base font-size
.dcf-u-lg4
incrementally larger than base font-size
.dcf-u-lg5
incrementally larger than base font-size
.dcf-u-sm1
incrementally larger than base font-size
.dcf-u-sm2
incrementally larger than base font-size
.dcf-u-sm3
incrementally larger than base font-size
.dcf-u-sm4
incrementally larger than base font-size
.dcf-u-sm5
incrementally larger than base font-size

Line Height

.dcf-u-lh1
tightest line-height
.dcf-u-lh2
medium line-height (e.g., headings)
.dcf-u-lh3
regular line-height

Letter Spacing

.dcf-u-ls1
incrementally increase letter-spacing
.dcf-u-ls2
incrementally increase letter-spacing
.dcf-u-ls3
incrementally increase letter-spacing

Position

.dcf-u-static
position: static
.dcf-u-relative
position: relative
.dcf-u-absolute
position: absolute
.dcf-u-fixed
position: fixed
.dcf-u-sticky
position: sticky

Text Transform

.dcf-u-capitalize
text-transform: capitalize
.dcf-u-lowercase
text-transform: lowercase
.dcf-u-uppercase
text-transform: uppercase

Background

.dcf-u-bg-none
background: none
.dcf-u-bg-transparent
background-color: transparent
.dcf-u-bg-white
background-color: #fff

Box Alignment

.dcf-u-ai-flexstart
align-items: flex-start
.dcf-u-ai-flexend
align-items: flex-end
.dcf-u-ai-center
align-items: center
.dcf-u-ai-baseline
align-items: baseline
.dcf-u-ai-stretch
align-items: stretch
.dcf-u-ai-start
align-items: start
.dcf-u-ai-end
align-items: end
.dcf-u-ac-flexstart
align-content: flex-start
.dcf-u-ac-flexend
align-content: flex-end
.dcf-u-ac-center
align-content: center
.dcf-u-ac-stretch
align-content: stretch
.dcf-u-ac-around
align-content: around
.dcf-u-ac-between
align-content: between
.dcf-u-ac-evenly
align-content: evenly
.dcf-u-ac-start
align-content: start
.dcf-u-ac-end
align-content: end
.dcf-u-as-auto
align-self: auto
.dcf-u-as-flexstart
align-self: flex-start
.dcf-u-as-flexend
align-self: flex-end
.dcf-u-as-center
align-self: center
.dcf-u-as-baseline
align-self: baseline
.dcf-u-as-stretch
align-self: stretch
.dcf-u-as-start
align-self: start
.dcf-u-as-end
align-self: end
.dcf-u-ji-center
justify-items: center
.dcf-u-ji-stretch
justify-items: stretch
.dcf-u-ji-start
justify-items: start
.dcf-u-ji-end
justify-items: end
.dcf-u-jc-flexstart
justify-content: flex-start
.dcf-u-jc-flexend
justify-content: flex-end
.dcf-u-jc-center
justify-content: center
.dcf-u-jc-stretch
justify-content: stretch
.dcf-u-jc-around
justify-content: around
.dcf-u-jc-between
justify-content: between
.dcf-u-jc-evenly
justify-content: evenly
.dcf-u-jc-start
justify-content: start
.dcf-u-jc-end
justify-content: end
.dcf-u-js-center
justify-self: center
.dcf-u-js-stretch
justify-self: stretch
.dcf-u-js-start
justify-self: start
.dcf-u-js-end
justify-self: end

Colors

.dcf-u-inverse
light color on dark background
a.dcf-u-inverse:link
light color on dark background
a.dcf-u-inverse:visited
light color on dark background
a.dcf-u-inverse:hover
light color on dark background
a.dcf-u-inverse:active
light color on dark background

Display

.dcf-u-none
display: none
.dcf-u-block
display: block
.dcf-u-inline
display: inline
.dcf-u-inlineblock
display: inline-block
.dcf-u-flex
display: flex
.dcf-u-inlineflex
display: inline-flex
.dcf-u-grid
display: grid
.dcf-u-inlinegrid
display: inline-grid
.dcf-u-subgrid
display: subgrid
.dcf-u-table
display: table
.dcf-u-tablecell
display: table-cell

Flexbox

.dcf-u-flex-col
flex-direction: column
.dcf-u-flex-colrev
flex-direction: column-reverse
.dcf-u-flex-row
flex-direction: row
.dcf-u-flex-rowrev
flex-direction: row-reverse
.dcf-u-flex-wrap
flex-wrap: wrap
.dcf-u-flex-wraprev
flex-wrap: wrap-reverse
.dcf-u-flex-nowrap
flex-wrap: nowrap
.dcf-u-flex-grow1
flex-grow: 1
.dcf-u-flex-shrink0
flex-shrink: 0

Floats

.dcf-u-float-right
float: right
.dcf-u-float-left
float: left
.dcf-u-clear-right
clear: right
.dcf-u-clear-left
clear: left
.dcf-u-clear-both
clear: both

Order (for Flexbox and Grid)

.dcf-u-1st
first
.dcf-u-2nd
second
.dcf-u-3rd
third
.dcf-u-4th
fourth
.dcf-u-5th
fifth
.dcf-u-6th
sixth
.dcf-u-7th
seventh
.dcf-u-8th
eighth
.dcf-u-9th
ninth

Overflow

.dcf-u-overflow-visible
overflow: visible
.dcf-u-overflow-hidden
overflow: hidden
.dcf-u-overflow-scroll
overflow: scroll
.dcf-u-overflow-auto
overflow: auto
.dcf-u-overflow-x-visible
overflow-x: visible
.dcf-u-overflow-x-hidden
overflow-x: hidden
.dcf-u-overflow-x-scroll
overflow-x: scroll
.dcf-u-overflow-x-auto
overflow-x: auto
.dcf-u-overflow-y-visible
overflow-y: visible
.dcf-u-overflow-y-hidden
overflow-y: hidden
.dcf-u-overflow-y-scroll
overflow-y: scroll
.dcf-u-overflow-y-auto
overflow-y: auto

Vertical Text Alignment

.dcf-u-txt-baseline
vertical-align: baseline
.dcf-u-txt-top
vertical-align: top
.dcf-u-txt-middle
vertical-align: middle
.dcf-u-txt-bottom
vertical-align: bottom
.dcf-u-txt-texttop
vertical-align: text-top
.dcf-u-txt-textbottom
vertical-align: text-bottom

Horizontal Text Alignment

.dcf-u-txt-center
text-align: center
.dcf-u-txt-left
text-align: left
.dcf-u-txt-right
text-align: right

Text Decoration

.dcf-u-txt-decor-none
text-decoration: none

Text Wrap

.dcf-u-txt-nowrap
white-space: nowrap

Font Weight

.dcf-u-regular
font-weight: regular
.dcf-u-bold
font-weight: bold

Font Style

.dcf-u-roman
font-style: normal
.dcf-u-italic
font-italic: italic

Visibility

.dcf-u-invisible
visibility: hidden
.dcf-u-visible
visibility: visible
.dcf-u-sr-only
visible for screen readers only
.dcf-u-sr-only.dcf-u-show-on-focus:active
visible for screen readers only when active
.dcf-u-sr-only.dcf-u-show-on-focus:focus
visible for screen readers only when focused

Aspect Ratio

.dcf-u-ratio
apply an aspect ratio to an element and specify the ratio with one of the following classes
.dcf-u-ratio--16x9
apply a 16×9 aspect ratio to an element
.dcf-u-ratio--4x3
apply a 4×3 aspect ratio to an element
.dcf-u-ratio--1x1
apply a 1×1 (square) aspect ratio to an element

Object Fit

.dcf-u-objfit-contain
object-fit: contain
.dcf-u-objfit-cover
object-fit: cover

Borders

.dcf-u-b1
1px border, all sides
.dcf-u-bt
1px border-top
.dcf-u-br
1px border-right
.dcf-u-bb
1px border-bottom
.dcf-u-bl
1px border-left
.dcf-u-b0
border: none

Border Radius

.dcf-u-circle
circle border radius
.dcf-u-rounded
rounded corners, all sides
.dcf-u-rounded-top
rounded top corners
.dcf-u-rounded-right
rounded right corners
.dcf-u-rounded-bottom
rounded bottom corners
.dcf-u-rounded-left
rounded left corners

Disabled

.dcf-u-disabled
cursor: not allowed, pointer-events: none, decreased opacity

Overlay

.dcf-u-overlay-dark
dark overlay (e.g. modal backgrounds)
.dcf-u-overlay-light
light overlay (e.g. modal backgrounds)

4.1 styles mapped to 5.0 classes

Bands

  • #maincontent.dcf-o-main
  • .wdn-main.dcf-o-main
  • .wdn-band
  • .wdn-text-band
  • .wdn-inner-wrapper.dcf-o-wrapper
  • .wdn-inner-padding-sm
  • .wdn-inner-padding-lg
  • .wdn-inner-padding-no-top.dcf-u-pt0
  • .wdn-inner-padding-no-bottom.dcf-u-pb0
  • .wdn-inner-padding-none.dcf-u-pt0 + .dcf-u-pb0
  • .wdn-stretch.dcf-o-full-width
  • .wdn-center.dcf-u-txt-center
  • .wdn-scarlet-band
  • .wdn-light-triad-band
  • .wdn-light-complement-band
  • .wdn-light-neutral-band
  • .wdn-band-triad-seperator
  • .wdn-band-complement-seperator
  • .wdn-band-neutral-seperator

Base

  • .wdn-main.dcf-o-main

Breadcrumbs

  • #breadcrumbs
  • .last-link
  • .selected
  • .storednav

Carousel

  • .js
  • .flexslider
  • .slides

Columns

  • .wdn-two-flow-columns
  • .wdn-three-flow-columns

Display

  • template.dcf-u-none
  • [hidden].dcf-u-none
  • .wdn-dropdown-widget-button.dcf-u-none
  • .wdn-nav-toggle.dcf-u-none
  • .wdn-share-options.dcf-u-none
  • #wdn_idm_notice_container.dcf-u-none
  • #wdn_search_form button.dcf-u-none
  • #wdn_search_progress.dcf-u-none
  • #wdn_search_frame.dcf-u-none
  • #navigation li.empty.dcf-u-none
  • #navigation .wdn-icon-menu.dcf-u-none
  • #wdn_menu_toggle.dcf-u-none
  • .wdn-menu-trigger label.dcf-u-none

Footer

  • #footer
  • .wdn-icon-container
  • .wdn-footer-optional
  • .wdn-footer-local
  • .wdn-contact-info
  • .wdn-related-links
  • .wdn-footer-global
  • .wdn-footer-list
  • .wdn-footer-end
  • .wdn-footer-text
  • .wdn-wdn-qa
  • .wdn-copyright-phone
  • .wdn-footer-logo
  • #tips_wordmark
  • #nebraska-b1g-lockup
  • #footer_n_logo
  • #b1g_wordmark
  • #unl_wordmark

Forms

  • .wdn-std
  • .wdn-input-group.dcf-c-input-group
  • .wdn-input-group-btn
  • .wdn-webform-opt-out
  • .required
  • .helper
  • .wdn-button.dcf-c-btn
  • .wdn-button-triad
  • .wdn-button-complement
  • .wdn-button-brand.dcf-c-btn + .dcf-c-btn--primary
  • .wdn-button-energetic
  • .wdn-button-outline.dcf-c-btn + .dcf-c-btn--inverse

Grid

  • .wdn-grid-set
  • .wdn-col-*

Header

  • #header
  • #wdn_header_top
  • #wdn_institution_title
  • #wdn_logo_lockup
  • #logo
  • #wdn_site_affiliation
  • #wdn_site_title

Helpers

  • .centered
  • .clear.dcf-u-clear-both
  • .clear-top.dcf-u-mt0
  • .hidden.dcf-u-none
  • .wdn-fouc-fix.dcf-u-invisible
  • .wdn-pull-left.dcf-u-float-left
  • .wdn-pull-right.dcf-u-float-right
  • .wdn-responsive-embed
  • .wdn-aspect16x9.dcf-u-ratio--16x9
  • .wdn-aspect3x4.dcf-u-ratio--4x3
  • .wdn-responsive-item.dcf-u-ratio__child
  • .wdn-text-hidden.dcf-u-sr-only

Hero

  • .wdn-hero
  • .wdn-hero-text-container
  • .locate-left
  • .locate-center
  • .locate-right
  • .wdn-hero-heading
  • .wdn-hero-initial-line
  • .wdn-hero-impact-line
  • .wdn-hero-video
  • .wdn-hero-picture

IdM

  • .wdn-reousrce-login-trigger
  • .nav-scrolling
  • #wdn_idm_notice_container
  • #wdn_idm_toggle_label
  • #wdn_idm_username
  • .wdn-idm-options

Images

  • .frame
  • .wdn-frame

Infographic

  • .number

Infographics (plural in /modules Less directory)

  • .stat
  • .stat-helper
  • .wdn-infographic
  • .wdn-infographic-*

Navigation

  • .skipnav.dcf-c-skipnav
  • #wdn_navigation_bar
  • #navigation
  • .wdn-content-slide
  • .wdn-icon-menu
  • .empty-secondary
  • .wdn-nav-toggle
  • li.empty
  • .wdn-menu-trigger
  • .nav-scrolling
  • .nav_ready
  • .nav_collapsed
  • .nav_expanded
  • .nav_changing
  • .pause
  • .js
  • .wdn-menu-trigger
  • #wdn_menu_toggle

Noscript

  • #wdn_noscript
  • #wdn_noscript_padding

Old Grid

  • .grid1 – .grid12
  • .first

Pagination

  • .wdn_pagination
  • .ellipsis
  • .selected

Promo Image

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

Quote

  • .wdn-quote.dcf-c-blockquote
  • .wdn-quoter.dcf-c-attribution
  • .quoter-context

Regions

  • .hide-wdn_institution_title.dcf-u-none
  • .hide-wdn_identity_management.dcf-u-none
  • .hide-wdn_search.dcf-u-none
  • .hide-wdn_navigation_wrapper
  • .hide-breadcrumbs.dcf-u-none
  • .hide-pagetitle.dcf-u-sr-only
  • .hide-footer.dcf-u-none
  • .hide-wdn_footer_related.dcf-u-none
  • .hide-wdn_copyright.dcf-u-none
  • .hide-wdn_footer_contact.dcf-u-none
  • .hide-wdn_attribution.dcf-u-none
  • .hide-wdn_logos.dcf-u-none
  • .terminal

Resources

  • .wdn_randomizer
  • .show
  • .wdn-resource-label
  • .wdn-reource-app-trigger
  • .wdn-resource-label
  • #wdn_resources

Search

  • #wdn_search_form
  • #wdn_search_query
  • #wdn_search
  • .nav-scrolling
  • .wdn-icon-search
  • #wdn_search_progress
  • #wdn_search_frame
  • #wdn_search_toggle_label

Share

  • .wdn-share-this-page
  • .js
  • .nav-scrolling
  • .nav_ready
  • .wdn-dropdown-widget-button
  • .wdn-icon-share
  • .wdn-share-options

Tables

  • .wdn_responsive_table
  • .flush-left
  • table.primary, table.wdn_responsive_table.primary
  • table.cool, table.wdn_responsive_table.cool
  • table.soothing, table.wdn_responsive_table.soothing
  • table.neutral, table.wdn_responsive_table.neutral
  • table.energetic, table.wdn_responsive_table.energetic

Tabs

  • .wdn_tabs
  • li.selected
  • .wdn_tabs_content

Text

  • .wdn-brand
  • .wdn-sans-serif.unl-u-sans-serif
  • .wdn-list-reset.dcf-c-list-unstyled
  • .wdn-heading
  • .wdn-impact
  • .wdn-brand-cap
  • .wdn-sans-caps.unl-u-sans-serif + .dcf-u-uppercase
  • .wdn-alt-header.unl-u-sans-serif + .dcf-u-uppercase
  • .wdn-list-header.unl-u-sans-serif + .dcf-u-uppercase
  • .wdn-subhead.dcf-c-subhead
  • .wdn-intro-p.dcf-c-lead
  • p.small
  • .wdn-icon-*

Twitter

  • .twitter-band
  • .tweet
  • .author

WDN UI

  • .wdn-dropdown-widget-button
  • .wdn-dropdown-widget-button-no-outline

Wrapper

  • #wdn_wrapper.dcf-u-overflow-hidden
  • .wdn-input-driver.dcf-u-sr-only

Zenbox

  • .zenbox