5.0 Classes

5.0 Utility Classes

Height & Width


height: 0
height: 0.42em
height: 0.56em
height: 0.75em
height: 1em
height: 1.33em
height: 1.77em
height: 2.37em
height: 3.16em
height: 4.21em
height: 5.61em
height: 100%
height: 100vh
min-height: 0
max-height: 100vh
max-height: 100vw


width: 0
width: 0.42em
width: 0.56em
width: 0.75em
width: 1em
width: 1.33em
width: 1.77em
width: 2.37em
width: 3.16em
width: 4.21em
width: 5.61em
width: 100%
width: 100vh
min-width: 0
max-width: 100vh
max-width: 100vw

Margin & Padding


Margin - All Sides
margin (all sides), 0em
margin (all sides), 0.42em
margin (all sides), 0.56em
margin (all sides), 0.75em
margin (all sides), 1em
margin (all sides), 1.33em
margin (all sides), 1.77em
margin (all sides), 2.37em
margin (all sides), 3.16em
margin (all sides), 4.21em
margin (all sides), 5.61em
Margin - Top
margin-top, 0em
margin-top, 0.42em
margin-top, 0.56em
margin-top, 0.75em
margin-top, 1em
margin-top, 1.33em
margin-top, 1.77em
margin-top, 2.37em
margin-top, 3.16em
margin-top, 4.21em
margin-top, 5.61em
Margin - Right
margin-right, 0em
margin-right, 0.42em
margin-right, 0.56em
margin-right, 0.75em
margin-right, 1em
margin-right, 1.33em
margin-right, 1.77em
margin-right, 2.37em
margin-right, 3.16em
margin-right, 4.21em
margin-right, 5.61em
Margin - Bottom
margin-bottom, 0em
margin-bottom, 0.42em
margin-bottom, 0.56em
margin-bottom, 0.75em
margin-bottom, 1em
margin-bottom, 1.33em
margin-bottom, 1.77em
margin-bottom, 2.37em
margin-bottom, 3.16em
margin-bottom, 4.21em
margin-bottom, 5.61em
Margin - Left
margin-left, 0em
margin-left, 0.42em
margin-left, 0.56em
margin-left, 0.75em
margin-left, 1em
margin-left, 1.33em
margin-left, 1.77em
margin-left, 2.37em
margin-left, 3.16em
margin-left, 4.21em
margin-left, 5.61em


Padding - All Sides
padding (all sides), 0em
padding (all sides), 0.42em
padding (all sides), 0.56em
padding (all sides), 0.75em
padding (all sides), 1em
padding (all sides), 1.33em
padding (all sides), 1.77em
padding (all sides), 2.37em
padding (all sides), 3.16em
padding (all sides), 4.27em
padding (all sides), 5.61em
Padding - Top
padding-top, 0em
padding-top, 0.42em
padding-top, 0.56em
padding-top, 0.75em
padding-top, 1em
padding-top, 1.33em
padding-top, 1.77em
padding-top, 2.37em
padding-top, 3.16em
padding-top, 4.27em
padding-top, 5.61em
Padding - Right
padding-right, 0em
padding-right, 0.42em
padding-right, 0.56em
padding-right, 0.75em
padding-right, 1em
padding-right, 1.33em
padding-right, 1.77em
padding-right, 2.37em
padding-right, 3.16em
padding-right, 4.27em
padding-right, 5.61em
Padding - Bottom
padding-bottom, 0em
padding-bottom, 0.42em
padding-bottom, 0.56em
padding-bottom, 0.75em
padding-bottom, 1em
padding-bottom, 1.33em
padding-bottom, 1.77em
padding-bottom, 2.37em
padding-bottom, 3.16em
padding-bottom, 4.27em
padding-bottom, 5.61em
Padding - Left
padding-left, 0em
padding-left, 0.42em
padding-left, 0.56em
padding-left, 0.75em
padding-left, 1em
padding-left, 1.33em
padding-left, 1.77em
padding-left, 2.37em
padding-left, 3.16em
padding-left, 4.27em
padding-left, 5.61em


position: static
position: relative
position: absolute
position: fixed
position: sticky
top: 0
right: 0
bottom: 0
left: 0


background-color: transparent
background-color: #fff
dark overlay (e.g. modal backgrounds)
light overlay (e.g. modal backgrounds)
background-position: center
background-position: top
background-position: right
background-position: right top
background-position: right bottom
background-position: bottom
background-position: left
background-position: left top
background-position: left bottom
background-repeat: no-repeat
background-repeat: repeat
background-repeat: repeat-x
background-repeat: repeat-y
background-size: contain
background-size: cover
background: none

Box Alignment

align-items: flex-start
align-items: flex-end
align-items: center
align-items: baseline
align-items: stretch
align-items: start
align-items: end
align-content: flex-start
align-content: flex-end
align-content: center
align-content: stretch
align-content: around
align-content: between
align-content: evenly
align-content: start
align-content: end
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
align-self: stretch
align-self: start
align-self: end
justify-items: start
justify-items: end
justify-items: center
justify-items: stretch
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: stretch
justify-content: around
justify-content: between
justify-content: evenly
justify-content: start
justify-content: end
justify-self: start
justify-self: center
justify-self: stretch
justify-self: end


overrides theme body text color with theme background color
overrides theme link color with theme background color


display: none
display: block
display: inline
display: inline-block
display: flex
display: inline-flex
display: grid
display: inline-grid
display: table
display: table-cell


flex-direction: column
flex-direction: column-reverse
flex-direction: row
flex-direction: row-reverse
flex-wrap: wrap
flex-wrap: wrap-reverse
flex-wrap: nowrap
flex: none
flex: initial
flex: auto
flex: 1
flex-grow: 1
flex-shrink: 0


float: right
float: left
force an element to self-clear its children

Grid (CSS Grids)

a static column gap value of 1em
a static column gap value of 1.77em
a static column gap value of 3.16em
a variable column gap value of a portion of the viewport width
a static column gap value of 1em
a static column gap value of 1.77em
a static column gap value of 3.16em

Order (for Flexbox and Grid)



overflow: visible
overflow: hidden
overflow: auto
overflow: scroll
overflow-x: scroll
overflow-y: scroll

Font Size

font-size: 1rem
font-size: .75em
font-size: .84em
font-size: 1em
font-size: 1.13em
font-size: 1.33em, equivalent to h6 font size
font-size: 1.5em, equivalent to h5 font size
font-size: 1.77em, equivalent to h4 font size
font-size: 2em, equivalent to h3 font size
font-size: 2.37em, equivalent to h2 font size
font-size: 2.67em, equivalent to h1 font size
font-size: 3.16em
font-size: 4.21em
font-size: 4.74em
font-size: 5.62em
font-size: 6.32em
font-size: 7.49em

Line Height

line-height: 1, tightest line-height
line-height: 1.125, medium line-height (default line-height for headings)
line-height: 1.33, regular line-height (optional line-height for headings)
line-height: 1.5, tallest line-height (default, used for body copy)

Text Transform

text-transform: capitalize
text-transform: lowercase
text-transform: uppercase
text-transform: none

Vertical Text Alignment

vertical-align: baseline
vertical-align: top
vertical-align: middle
vertical-align: bottom
vertical-align: text-top
vertical-align: text-bottom

Horizontal Text Alignment

text-align: center
text-align: left
text-align: right

Text Decoration

text-decoration: none
adds text-decoration:underline to elements on hover

Text Wrap

white-space: nowrap
truncate text with an ellipsis as needed

Font Weight

font-weight: normal
font-weight: bold

Font Style

font-style: normal
font-italic: italic


visibility: hidden
visibility: visible
element visible to screen readers only
element is visible to screen readers, element also becomes visible on screen when in enters an active or focused state

Aspect Ratios

prepare element container to receive an aspect ratio and specify the ratio with one of the following classes
apply a 16×9 aspect ratio to an element
apply a 4×3 aspect ratio to an element
apply a 1×1 (square) aspect ratio to an element
allow child element to be contained within the parent container's aspect ratio

Object Fit

object-fit: contain
object-fit: cover


border: none
1px border, all sides
1px border-top
1px border-right
1px border-bottom
1px border-left

Border Radius

circle border radius
rounded corners, all sides
rounded top corners
rounded right corners
rounded bottom corners
rounded left corners


cursor: not-allowed, pointer-events: none, and decreased opacity to indicate element is disabled

SVG Related

fill uses current defined color
stroke uses current defined color

Letter Spacing

no letter-spacing
incrementally increase letter-spacing
incrementally increase letter-spacing

4.1 styles mapped to 5.0 classes


  • #maincontent.dcf-main
  • .wdn-main.dcf-main
  • .wdn-band
  • .wdn-text-band
  • .wdn-inner-wrapper.dcf-wrapper
  • .wdn-inner-padding-sm
  • .wdn-inner-padding-lg
  • .wdn-inner-padding-no-top.dcf-pt-0
  • .wdn-inner-padding-no-bottom.dcf-pb-0
  • .wdn-inner-padding-none.dcf-pt-0 + .dcf-pb-0
  • .wdn-stretch.dcf-full-width
  • .wdn-center.dcf-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


  • .wdn-main.dcf-main


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


  • .js
  • .flexslider
  • .slides


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


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


  • #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


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


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


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


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


  • .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


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


  • .frame
  • .wdn-frame


  • .number

Infographics (plural in /modules Less directory)

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


  • .skipnav.dcf-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


  • #wdn_noscript
  • #wdn_noscript_padding

Old Grid

  • .grid1 – .grid12
  • .first


  • .wdn_pagination
  • .ellipsis
  • .selected

Promo Image

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


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


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


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


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


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


  • .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


  • .wdn_tabs
  • li.selected
  • .wdn_tabs_content


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


  • .twitter-band
  • .tweet
  • .author


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


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


  • .zenbox