5.0 Classes

5.0 Utility Classes

Height & Width

Height

.dcf-h-0
height: 0
.dcf-h-1
height: 0.42em
.dcf-h-2
height: 0.56em
.dcf-h-3
height: 0.75em
.dcf-h-4
height: 1em
.dcf-h-5
height: 1.33em
.dcf-h-6
height: 1.77em
.dcf-h-7
height: 2.37em
.dcf-h-8
height: 3.16em
.dcf-h-9
height: 4.21em
.dcf-h-10
height: 5.61em
.dcf-h-100%
height: 100%
.dcf-h-100vh
height: 100vh
.dcf-h-min-0
min-height: 0
.dcf-h-max-100%
max-height: 100vh
.dcf-h-max-100vw
max-height: 100vw

Width

.dcf-w-0
width: 0
.dcf-w-1
width: 0.42em
.dcf-w-2
width: 0.56em
.dcf-w-3
width: 0.75em
.dcf-w-4
width: 1em
.dcf-w-5
width: 1.33em
.dcf-w-6
width: 1.77em
.dcf-w-7
width: 2.37em
.dcf-w-8
width: 3.16em
.dcf-w-9
width: 4.21em
.dcf-w-10
width: 5.61em
.dcf-w-100%
width: 100%
.dcf-w-100vh
width: 100vh
.dcf-w-min-0
min-width: 0
.dcf-w-max-100%
max-width: 100vh
.dcf-w-max-100vw
max-width: 100vw

Margin & Padding

Margin

Margin - All Sides
.dcf-m-0
margin (all sides), 0em
.dcf-m-1
margin (all sides), 0.42em
.dcf-m-2
margin (all sides), 0.56em
.dcf-m-3
margin (all sides), 0.75em
.dcf-m-4
margin (all sides), 1em
.dcf-m-5
margin (all sides), 1.33em
.dcf-m-6
margin (all sides), 1.77em
.dcf-m-7
margin (all sides), 2.37em
.dcf-m-8
margin (all sides), 3.16em
.dcf-m-9
margin (all sides), 4.21em
.dcf-m-10
margin (all sides), 5.61em
Margin - Top
.dcf-mt-0
margin-top, 0em
.dcf-mt-1
margin-top, 0.42em
.dcf-mt-2
margin-top, 0.56em
.dcf-mt-3
margin-top, 0.75em
.dcf-mt-4
margin-top, 1em
.dcf-mt-5
margin-top, 1.33em
.dcf-mt-6
margin-top, 1.77em
.dcf-mt-7
margin-top, 2.37em
.dcf-mt-8
margin-top, 3.16em
.dcf-mt-9
margin-top, 4.21em
.dcf-mt-10
margin-top, 5.61em
Margin - Right
.dcf-mr-0
margin-right, 0em
.dcf-mr-1
margin-right, 0.42em
.dcf-mr-2
margin-right, 0.56em
.dcf-mr-3
margin-right, 0.75em
.dcf-mr-4
margin-right, 1em
.dcf-mr-5
margin-right, 1.33em
.dcf-mr-6
margin-right, 1.77em
.dcf-mr-7
margin-right, 2.37em
.dcf-mr-8
margin-right, 3.16em
.dcf-mr-9
margin-right, 4.21em
.dcf-mr-10
margin-right, 5.61em
Margin - Bottom
.dcf-mb-0
margin-bottom, 0em
.dcf-mb-1
margin-bottom, 0.42em
.dcf-mb-2
margin-bottom, 0.56em
.dcf-mb-3
margin-bottom, 0.75em
.dcf-mb-4
margin-bottom, 1em
.dcf-mb-5
margin-bottom, 1.33em
.dcf-mb-6
margin-bottom, 1.77em
.dcf-mb-7
margin-bottom, 2.37em
.dcf-mb-8
margin-bottom, 3.16em
.dcf-mb-9
margin-bottom, 4.21em
.dcf-mb-10
margin-bottom, 5.61em
Margin - Left
.dcf-ml-0
margin-left, 0em
.dcf-ml-1
margin-left, 0.42em
.dcf-ml-2
margin-left, 0.56em
.dcf-ml-3
margin-left, 0.75em
.dcf-ml-4
margin-left, 1em
.dcf-ml-5
margin-left, 1.33em
.dcf-ml-6
margin-left, 1.77em
.dcf-ml-7
margin-left, 2.37em
.dcf-ml-8
margin-left, 3.16em
.dcf-ml-9
margin-left, 4.21em
.dcf-ml-10
margin-left, 5.61em

Padding

Padding - All Sides
.dcf-p-0
padding (all sides), 0em
.dcf-p-1
padding (all sides), 0.42em
.dcf-p-2
padding (all sides), 0.56em
.dcf-p-3
padding (all sides), 0.75em
.dcf-p-4
padding (all sides), 1em
.dcf-p-5
padding (all sides), 1.33em
.dcf-p-6
padding (all sides), 1.77em
.dcf-p-7
padding (all sides), 2.37em
.dcf-p-8
padding (all sides), 3.16em
.dcf-p-9
padding (all sides), 4.27em
.dcf-p-10
padding (all sides), 5.61em
Padding - Top
.dcf-pt-0
padding-top, 0em
.dcf-pt-1
padding-top, 0.42em
.dcf-pt-2
padding-top, 0.56em
.dcf-pt-3
padding-top, 0.75em
.dcf-pt-4
padding-top, 1em
.dcf-pt-5
padding-top, 1.33em
.dcf-pt-6
padding-top, 1.77em
.dcf-pt-7
padding-top, 2.37em
.dcf-pt-8
padding-top, 3.16em
.dcf-pt-9
padding-top, 4.27em
.dcf-pt-10
padding-top, 5.61em
Padding - Right
.dcf-pr-0
padding-right, 0em
.dcf-pr-1
padding-right, 0.42em
.dcf-pr-2
padding-right, 0.56em
.dcf-pr-3
padding-right, 0.75em
.dcf-pr-4
padding-right, 1em
.dcf-pr-5
padding-right, 1.33em
.dcf-pr-6
padding-right, 1.77em
.dcf-pr-7
padding-right, 2.37em
.dcf-pr-8
padding-right, 3.16em
.dcf-pr-9
padding-right, 4.27em
.dcf-pr-10
padding-right, 5.61em
Padding - Bottom
.dcf-pb-0
padding-bottom, 0em
.dcf-pb-1
padding-bottom, 0.42em
.dcf-pb-2
padding-bottom, 0.56em
.dcf-pb-3
padding-bottom, 0.75em
.dcf-pb-4
padding-bottom, 1em
.dcf-pb-5
padding-bottom, 1.33em
.dcf-pb-6
padding-bottom, 1.77em
.dcf-pb-7
padding-bottom, 2.37em
.dcf-pb-8
padding-bottom, 3.16em
.dcf-pb-9
padding-bottom, 4.27em
.dcf-pb-10
padding-bottom, 5.61em
Padding - Left
.dcf-pl-0
padding-left, 0em
.dcf-pl-1
padding-left, 0.42em
.dcf-pl-2
padding-left, 0.56em
.dcf-pl-3
padding-left, 0.75em
.dcf-pl-4
padding-left, 1em
.dcf-pl-5
padding-left, 1.33em
.dcf-pl-6
padding-left, 1.77em
.dcf-pl-7
padding-left, 2.37em
.dcf-pl-8
padding-left, 3.16em
.dcf-pl-9
padding-left, 4.27em
.dcf-pl-10
padding-left, 5.61em

Position

.dcf-static
position: static
.dcf-relative
position: relative
.dcf-absolute
position: absolute
.dcf-fixed
position: fixed
.dcf-sticky
position: sticky
.dcf-pin-top
top: 0
.dcf-pin-right
right: 0
.dcf-pin-bottom
bottom: 0
.dcf-pin-left
left: 0

Background

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

Box Alignment

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

Colors

.dcf-inverse
overrides theme body text color with theme background color
a.dcf-inverse
overrides theme link color with theme background color

Display

.dcf-d-none
display: none
.dcf-d-block
display: block
.dcf-d-inline
display: inline
.dcf-d-inline-block
display: inline-block
.dcf-d-flex
display: flex
.dcf-d-inline-flex
display: inline-flex
.dcf-d-grid
display: grid
.dcf-d-inline-grid
display: inline-grid
.dcf-d-table
display: table
.dcf-d-table-cell
display: table-cell

Flexbox

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

Floats

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

Grid (CSS Grids)

.dcf-col-gap-sm
a static column gap value of 1em
.dcf-col-gap-md
a static column gap value of 1.77em
.dcf-col-gap-lg
a static column gap value of 3.16em
.dcf-col-gap-vw
a variable column gap value of a portion of the viewport width
.dcf-row-gap-sm
a static column gap value of 1em
.dcf-row-gap-md
a static column gap value of 1.77em
.dcf-row-gap-lg
a static column gap value of 3.16em

Order (for Flexbox and Grid)

.dcf-1st
first
.dcf-2nd
second
.dcf-3rd
third

Overflow

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

Font Size

.dcf-txt-base
font-size: 1rem
.dcf-txt-xs
font-size: .75em
.dcf-txt-sm
font-size: .84em
.dcf-txt-md
font-size: 1em
.dcf-txt-lg
font-size: 1.13em
.dcf-txt-h6
font-size: 1.33em, equivalent to h6 font size
.dcf-txt-h5
font-size: 1.5em, equivalent to h5 font size
.dcf-txt-h4
font-size: 1.77em, equivalent to h4 font size
.dcf-txt-h3
font-size: 2em, equivalent to h3 font size
.dcf-txt-h2
font-size: 2.37em, equivalent to h2 font size
.dcf-txt-h1
font-size: 2.67em, equivalent to h1 font size
.dcf-txt-xl
font-size: 3.16em
.dcf-txt-2xl
font-size: 4.21em
.dcf-txt-3xl
font-size: 4.74em
.dcf-txt-4xl
font-size: 5.62em
.dcf-txt-5xl
font-size: 6.32em
.dcf-txt-6xl
font-size: 7.49em

Line Height

.dcf-lh-1
line-height: 1, tightest line-height
.dcf-lh-2
line-height: 1.125, medium line-height (default line-height for headings)
.dcf-lh-3
line-height: 1.33, regular line-height (optional line-height for headings)
.dcf-lh-4
line-height: 1.5, tallest line-height (default, used for body copy)

Text Transform

.dcf-capitalize
text-transform: capitalize
.dcf-lowercase
text-transform: lowercase
.dcf-uppercase
text-transform: uppercase
.dcf-case-reset
text-transform: none

Vertical Text Alignment

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

Horizontal Text Alignment

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

Text Decoration

.dcf-txt-decor-none
text-decoration: none
.dcf-txt-decor-hover
adds text-decoration:underline to elements on hover

Text Wrap

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

Font Weight

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

Font Style

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

Visibility

.dcf-invisible
visibility: hidden
.dcf-visible
visibility: visible
.dcf-sr-only
element visible to screen readers only
.dcf-sr-only.dcf-show-on-focus
element is visible to screen readers, element also becomes visible on screen when in enters an active or focused state

Aspect Ratios

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

Object Fit

.dcf-obj-fit-contain
object-fit: contain
.dcf-obj-fit-cover
object-fit: cover

Borders

.dcf-b-0
border: none
.dcf-b-1
1px border, all sides
.dcf-bt
1px border-top
.dcf-br
1px border-right
.dcf-bb
1px border-bottom
.dcf-bl
1px border-left

Border Radius

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

Disabled

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

SVG Related

.dcf-fill-current
fill uses current defined color
.dcf-stroke-current
stroke uses current defined color

Letter Spacing

.unl-ls-0
no letter-spacing
.unl-ls-1
incrementally increase letter-spacing
.unl-ls-2
incrementally increase letter-spacing

4.1 styles mapped to 5.0 classes

Bands

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

Base

  • .wdn-main.dcf-main

Breadcrumbs

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

Carousel

  • .js
  • .flexslider
  • .slides

Columns

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

Display

  • 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

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

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

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-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-blockquote
  • .wdn-quoter.dcf-attribution
  • .quoter-context

Regions

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

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

  • .twitter-band
  • .tweet
  • .author

WDN UI

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

Wrapper

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

Zenbox

  • .zenbox