5.0 Conversion Table

See the WDN website for additional deprecated styles.

SEARCH FOR REPLACE WITH NOTE
wdn-alt-header unl-font-sans dcf-uppercase default size sans serif font set in all caps
wdn-band dcf-bleed removes padding so that content can display flush with the edge of the browser, often used for background color/images
wdn-brand dcf-regular often used on headings to make them look less bold
wdn-button wdn-button-brand dcf-btn dcf-btn-primary red button with white text
wdn-button wdn-button-complement dcf-btn dcf-btn-primary changes the green button with white text to a red button with white text
wdn-button wdn-button-default dcf-btn dcf-btn-primary changes the brown button with white text to a red button with white text
wdn-button wdn-button-engergetic dcf-btn dcf-btn-primary changes the orange button with white text to a red button with white text
wdn-button wdn-button-triad dcf-btn dcf-btn-primary changes the blue button with white text to a red button with white text
wdn-button-outline dcf-btn dcf-btn-inverse-secondary white button outline with white text for use on a dark background color or pattern
wdn-center dcf-txt-center centers text, including buttons (does not center images)
wdn-inner-wrapper dcf-wrapper often used with wdn-band to add padding around text and images inside the band
wdn-intro-p dcf-txt-lg increases the size of paragraph text, often used on the first paragraph
wdn-light-complement-band unl-bg-light-gray replaces the light green background color with light gray
wdn-light-neutral-band unl-bg-lighter-gray replaces the light tan background color with light gray
wdn-light-triad-band unl-bg-lighter-gray replaces the light blue background color with light gray
wdn-list-reset dcf-list-bare removes margin, padding, and bullets from list elements
wdn-pull-left dcf-float-right forces a float right, often used to display text on the left or right of an image
wdn-pull-right dcf-float-left forces a float left, often used to display text on the left or right of an image
wdn-quote dcf-blockquote adds quotation decorations around content (must have <p></p> around the text inside the blockquote)
wdn-quoter dcf-attribution adds an em dash in front of quote attribution and puts attribution in a small font
wdn-stretch dcf-w-100% often used to stretch an image the full width of its container
wdn-subhead dcf-subhead unl-font-sans small sans serif font set in all caps
wdn-text-band dcf-w-max-lg wraps text to display in a reading length closer to 72 characters per line
wdn-text-hidden dcf-sr-only often used to hide text on the screen, without hiding it from screen readers or search engines
wdn-three-flow-columns dcf-columns-3 splits text into two equal height columns without using grids
wdn-two-flow-columns dcf-columns-2 splits text into three equal height columns without using grids

Was this page helpful? *