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 |